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

Question

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

Answer 1

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

body, html { 
  height: 100%; 
}

body { 
  display: table; 
}

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

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

Answer 2

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

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

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

html {
 height: 100%;
}

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

Answer 3

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

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

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