Как разместить стол в центре div горизонтально и вертикально

Мы можем установить изображение как фоновое изображение <div> как:

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

Мне нужно установить таблицу в центре <div> по горизонтали и по вертикали. Существует ли кросс-браузерное решение с помощью CSS?

Ответ 1

Центрирование - одна из самых больших проблем в CSS. Однако существуют некоторые трюки:

Чтобы центрировать таблицу горизонтально, вы можете установить левое и правое поле в auto:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

Чтобы центрировать его по вертикали, единственный способ - использовать javascript:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

Нет vertical-align:middle, поскольку таблица является блоком, а не встроенным элементом.

Изменить

Вот веб-сайт, который суммирует решения центрирования CSS: http://howtocenterincss.com/

Ответ 2

Вот что сработало для меня:

#div {
  display: flex;
  justify-content: center;
}

#table {
  align-self: center;
}

И это выравнивает его по вертикали и по горизонтали.

Ответ 3

Чтобы установить горизонтальный центр, вы можете сказать width: 50%; margin: auto;. Насколько я знаю, это кросс-браузер. Для вертикального выравнивания вы можете попробовать vertical-align:middle;, но он может работать только в отношении текста. Однако стоит попробовать.

Ответ 4

Кроме того, если вы хотите отцентрировать как по горизонтали, так и по вертикали -вместо создания потоковой схемы (в таких случаях применяются предыдущие решения) - вы можете сделать следующее:

Объявите основной div как позиционирование absolute или relative (я называю это content).
Объявите внутренний div, который фактически будет содержать таблицу (я называю это wrapper).
Объявите саму таблицу внутри wrapper div.
Примените CSS-преобразование, чтобы изменить "точку регистрации" объекта-оболочки в его центр.
Переместите объект-оболочку в центр родительского объекта.

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }

<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

Ответ 5

Просто добавьте margin: 0 auto; к вашему table. Не нужно добавлять какое-либо свойство в div

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

Ответ 6

Вы можете центрировать прямоangularьник как по вертикали, так и по горизонтали, используя следующую технику:

Внешний контейнер:

должен иметь display: table;

Внутренний контейнер:

должен иметь display: table-cell;
должен иметь vertical-align: middle;
должен иметь text-align: center;

Поле содержимого:

должен иметь display: inline-block;

Если вы используете эту технику, просто добавьте свою таблицу (вместе с любым другим контентом, который вы хотите использовать с ней) в поле контента.

Демо:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>

Ответ 7

Я обнаружил, что мне пришлось включить

body { width:100%; }

для "margin: 0 auto" для работы с таблицами.

Ответ 8

ширина: 50%; margin: auto; вертикально-Align: средний; Высота родительского div должна быть установлена