Как центрировать стол экрана (по вертикали и по горизонтали)

Question

У меня есть этот блок кода:

<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>

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

Вотдемо .

Как я могу это сделать?

Answer 1

Горизонтальное центрирование легко. Вам просто нужно установить оба поля на "auto":

table {
  margin-left: auto;
  margin-right: auto;
}

Вертикальное центрирование обычно достигается установкой типа отображения родительского элемента на table-cell и использованием свойства vertical-align. Если у вас за столом <div class="wrapper">:

.wrapper {
  display: table-cell;
  vertical-align: middle;
}

Более подробную информацию можно найти на http://www.w3.org/Style/Examples/007/center

Если вам нужна поддержка более старых версий Internet Explorer (я не знаю, что работает в какой версии этого странного и редко используемого браузера ;-)) , тогда вы можете выполнить поиск web для получения дополнительной информации, например: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (просто первый хит, который, кажется, упоминает IE)

Answer 2

Исправляет мертвую точку на экране:

HTML

<table class="box" border="1px">
    <tr>
        <td>
            my content
        </td>
    </tr>
</table>

CSS

.box {
    width:300px;
    height:300px;
    background-color:#d9d9d9;
    position:fixed;
    margin-left:-150px; /* half of width */
    margin-top:-150px;  /* half of height */
    top:50%;
    left:50%;
}

Просмотр результатов

http://jsfiddle.net/bukov/wJ7dY/168/

Answer 3

Для горизонтального выравнивания (без CSS)

Просто вставьте атрибут выравнивания внутри тега таблицы

<table align="center"></table

Answer 4

Я думаю, что это должно сработать:

<table border="1px" align="center">

Согласно http://w3schools.com/tags/tag_table.asp это устарело, но попробуйте.Если это не работает, перейдите на стили, как указано на сайте.

Answer 5

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

<table height=100% width=100%>
<td align=center valign=center>

(добавьте свою таблицу сюда)

</td>
</table>

команды align и valign помещают таблицу точно в середину экрана, независимо от того, что еще происходит.

Answer 6

Один путь к центру любой элемент неизвестной высоты и ширины как по горизонтали, так и по вертикали:

table {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

См. Пример

Answer 7

Я попробовал выше выровнять атрибут в HTML5.Не поддерживаетсяТакже я попробовал flex-align и vertival-align с атрибутами стиля.Все еще не в состоянии поместить ТАБЛИЦУ в центр экрана.Следующий стиль помещает таблицу в центр по горизонтали.

style = "margin: auto;"

Answer 8

У этого парня была волшебная палочка, которую мы искали, ребята.

Цитирую свой ответ:

просто добавьте «position: fixed», и он будет оставаться на виду даже при прокрутке вниз. посмотрите на http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}