Як розташувати таблицю в центрі поділки по горизонталі та вертикалі

Ми можемо встановити зображення як фонове зображення <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. Однак існують деякі хитрощі:

Для горизонтального центрування таблиці можна встановити лівий і правий поля для автоматичного:

<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>

Примітка. Додано колір тла для поділу для візуалізації вирівнювання таблиці до її центру

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

1. Оголосіть головний діл як 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>

Дивіться також цю скрипку !

Я виявив, що мені доводиться включати

body { width:100%; }

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