Извечная проблема HTML-вёрстки — вертикальное выравнивание элементов. Пользуясь особенностями таблиц можно легко отцентровать по вертикали и горизонтали блок произвольной ширины и высоты.

Трюк строится на той особенности, что ячейка растягивается на всю ширину таблицы, а содержимое ячейки просто центруется внутри неё с помощью свойств text-align и vertical-align. Для этого нужны:

• контейнер-таблица display: table;
• ячейка с содержимым display: table-cell;
• горизонтальное и вертикальное выравнивание ячейки внутри таблицы.

Такой приём удобен, если нужно отцентровать какой-либо блок, например, модальное окно на странице. Проверим это!