CSS: Как выровнять текст по центру в div? (или любые другие элементы, которые не являются таблицей)

Question

Для выравнивания текста по вертикали в ячейке таблицы я использую vertical-align: middle в td.

Но приведенное выше не работает с элементами div, span, header и другими элементами, не относящимися к таблице. Так как же я могу выровнять текст по вертикали в таких элементах?

Answer 1

Если это одна строка текста, вы можете установить высоту строки равной высоте элемента.

Answer 2

Существует множество возможностей, каждая из которых имеет свои преимущества и недостатки.

Вот хорошая статья Дугласа Херио, объясняющая 5 других методов и сравнивающая их.

Answer 3

Просто используйте следующий стиль:

<style type="text/css">
    div {
            vertical-align: middle;
            display: table-cell;
        }
</style>

Таким образом, вы «отображаете» div как ячейку таблицы, а поскольку vertical-align работает с ячейками таблицы, ваш текст будет выровнен по центру по вертикали.