Как разместить таблицу в центре 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ли кроссбраузерное решение ?

Центрирование - одна из самых больших проблем в 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/

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

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

#table {
  align-self: center;
}

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

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

Просто добавьте 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>

Примечание: в div добавлен цвет фона, чтобы визуализировать выравнивание таблицы относительно ее центра.

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

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

#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's 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>

Примечание: вы не можете избавиться от div-оболочки, поскольку этот стиль не работает непосредственно с таблицами, поэтому я использую div, чтобы обернуть его и расположить, пока таблица перемещается внутри div.

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

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

• должен иметь 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>

Смотрите также эту Fiddle !

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

body { width:100%; }

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