Как выровнять таблицу по вертикали в CSS

Question

Как я могу вертикально выровнять таблицу в середине экрана с помощью CSS?

Answer 1

Обычно что-то вроде этого работает довольно хорошо в любом элементе блока с определенной высотой.

table { 
 position: absolute;
 top: 50%;
 margin-top: -50%;
}

Сосредоточение на странице сложнее, так как у вас нет определенной высоты, но я думаю, что это работает.

html {
 height: 100%;
}

Вы можете столкнуться с некоторыми отличиями браузера, действуйте соответственно.

Answer 2

Короче говоря, просто сделайте ваше тело таблицей, потому что вертикальное выравнивание работает на ячейках таблицы:

body, html { 
  height: 100%; 
}

body { 
  display: table; 
}

#wrapper { 
  display: table-cell; 
  vertical-align: middle;
  height: 80%;
}

Это выровняет ваш верстальщик по вертикали по центру, и он будет текучим на 80%.

Answer 3

Если вы можете придать столу фиксированную высоту, то можете смело адаптировать CSS с этого сайта, который я только что сделал.

Немного сложно объяснить, но в основном вы устанавливаете "горизонт" высотой 1 пиксель на 50% высоты экрана вокруг вашего контента, а затем смещаете верх элемента, который должен быть центрирован (т.е. вашу таблицу), на 50% его высоты.

РЕДАКТИРОВАТЬ: Вот статья, из которой я изначально сделал свое решение, с объяснениями и всем остальным.