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

202

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

194

HTML

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

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

188

Java

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

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

237

Java

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

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

224