CSS блок по центру экрана

234
07 мая 2018, 20:57

Я хочу разместить блок точно по центру экрана (по горизонтали). Для этого я написал нужные стили для .main

Блок сдвигается, но уходит вправо больше, чем нужно. Видимо, начало блока позиционируется по центру, но потом содержимое блока смещается правее. Получается не то, что нужно.

Как сделать, чтобы центр экрана был посередине таблицы?

.main { 
  margin-left: auto; 
  margin-right: auto; 
  width: 10%; 
}
<div class="main"> 
  <table class="data" id="celebs"> 
    <thead> 
      <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Occupation</th> 
        <th>Approx. Location</th> 
        <th>Price</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>Some</td> 
        <td>other</td> 
        <td>thing</td> 
        <td>lol</td> 
        <td>used</td> 
      </tr> 
    </tbody> 
  </table> 
</div>

Answer 1

Если есть возможность обернуть, то можно использовать какой-то такой "хак":

.main { 
  margin-left: auto; 
  margin-right: auto; 
  width: 10%; 
} 
 
.main__inner { 
  display: inline-block; 
  position: relative; 
  left: 50%; 
} 
 
.data { 
  position: relative; 
  left: -50%; 
}
<div class="main"> 
  <div class="main__inner"> 
    <table class="data" id="celebs"> 
      <thead> 
        <tr> 
          <th>ID</th> 
          <th>Name</th> 
          <th>Occupation</th> 
          <th>Approx. Location</th> 
          <th>Price</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td>Some</td> 
          <td>other</td> 
          <td>thing</td> 
          <td>lol</td> 
          <td>used</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</div>

Ну или что-то такое:

.main { 
  margin-left: auto; 
  margin-right: auto; 
  width: 10%; 
} 
 
.data { 
  margin-left: 50%; 
  transform: translateX(-50%); 
}
<div class="main"> 
  <table class="data" id="celebs"> 
    <thead> 
      <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Occupation</th> 
        <th>Approx. Location</th> 
        <th>Price</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>Some</td> 
        <td>other</td> 
        <td>thing</td> 
        <td>lol</td> 
        <td>used</td> 
      </tr> 
    </tbody> 
  </table> 
</div>

Answer 2

Задайте margin:auto для таблицы и уберите ширину для блока-родителя

.data { 
  margin:auto; 
}
<div class="main"> 
  <table class="data" id="celebs"> 
    <thead> 
      <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Occupation</th> 
        <th>Approx. Location</th> 
        <th>Price</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>Some</td> 
        <td>other</td> 
        <td>thing</td> 
        <td>lol</td> 
        <td>used</td> 
      </tr> 
    </tbody> 
  </table> 
</div>

Answer 3

Flex

Доброго дня.
Могу предложить использовать display: flex;,
Так как блочные элементы изначально занимают 100% родительского блока, а выше

только body, то данный код выровняет все внутри .main по центру.

.main { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}
<div class="main"> 
  <table class="data" id="celebs"> 
    <thead> 
      <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Occupation</th> 
        <th>Approx. Location</th> 
        <th>Price</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>Some</td> 
        <td>other</td> 
        <td>thing</td> 
        <td>lol</td> 
        <td>used</td> 
      </tr> 
    </tbody> 
  </table> 
</div>

READ ALSO
Центрирование Google Captcha
HTML

Центрирование Google Captcha

Не помогаютКак сделать капчу по центру?

 226
Увеличение textarea по мере заполняемости - javascript
HTML

Увеличение textarea по мере заполняемости - javascript

Как можно увеличить textarea по мере заполняемости с помощью javascript?

 218
List to Json, сериализация
Java

List to Json, сериализация

Всем приветИ сразу же ВОПРОС: Как конвертировать List to Json

 292
Восстановление бинарного дерева
Java

Восстановление бинарного дерева

Теорема: Бинарное дерево можно однозначно восстановить имея InOrder и PostOrder/PreOrder последовательности, если последовательности не содержат дубликатов

 251