Универсальный метод центрирования

Раньше, когда размеры центрируемого элемента были неизвестны, приходилось применять таблицы или использовать CSS свойство display: table и display: table-cell.

Таблицы CSS могут быть для вас подходящим решением. Или нет. Таблицы выводятся с небольшими отличиями от обычного блочного элемента div. Например, 100% ширина. Таблица растянется только на ширину, достаточную для вывода содержания внутри, а блочный элемент по умолчанию растянется на всю ширину родительского элемента. Также проблемы могут возникнуть, если вам нужно позиционировать другой элемент внутри div или что-то еще, действие чего не согласуется с ячейкой таблицы.

Относительно новый, очень хитрый метод, дающий  результат в случае, когда размеры центруемого блока неизвестны.

Если мы установим элемент призрак с высотой 100%  внутри родительского элемента, а затем используем свойство vertical-align: middle для обоих внутренних элементов (центрируемый элемент и элемент призрак), то получим тот же эффект.

  1. /* Это родитель. Он может иметь любую ширину и высоту */
  2. .block {
  3.   text-align: center;
  4. }
  5.  
  6. /* Элемент призрак, нужен для центрирования */
  7. .block:before {
  8.   content: '';
  9.   display: inline-block;
  10.   height: 100%;
  11.   vertical-align: middle;
  12.   margin-right: -0.25em; /* Задаем небольшой отступ */
  13. }
  14.  
  15. /* Элемент для центрирования.
  16.    Он может иметь любую ширину и высоту */
  17. .centered {
  18.   display: inline-block;
  19.   vertical-align: middle;
  20.   width: 300px;
  21. }

Техника использования элемента призрака может стать стандартом де факто на годы. Но в действительности, она является тем же, что и трюк с таблицами. У нее есть хорошая поддержка в браузерах (включая IE 8+). IE 7 не поддерживает псевдо-элементы. Но он не поддерживает и таблицы CSS. Если требуется поддержка в IE <= 7 , то наступает время <table> (или эквивалентных не семантических решений на основе <span> или других элементов для организации призрака).