Центрирование в HTML/CSS

Требуется центрировать несколько элементов DOM внутри контейнера.
Приведем четыре варианта решения на примере центрирования двух параграфов. Перечислим основные достоинства и недостатки этих решений.

HTML таблица

Используем HTML таблицу с единственной ячейкой в качестве контейнера. Содержимое ячейки таблицы можно выровнять по вертикали и горизонтали.

See the Pen QyQXMw by Kirill Shabunov (@kshabunov) on CodePen.

Достоинства: работает везде, даже в очень старых браузерах.

Недостатки: противоречит принципу разделение содержания и представления документа, поэтому, в частности, несовместимо с адаптивным (отзывчивым) дизайном.

CSS таблица

Используем три вложенных div в качестве контейнера, из которых формируем CSS таблицу с единственной ячейкой. Содержимое ячейки таблицы можно выровнять по вертикали и горизонтали.

See the Pen ZQrdRe by Kirill Shabunov (@kshabunov) on CodePen.

Достоинства: соответствует современным принципам верстки, позволяет использовать адаптивный дизайн.

Недостатки: требует трех вложенных div, что усложняет HTML и может вызвать проблемы, если при генерировании контента используется сторонний код (CMS/фреймворк/библиотека).

CSS relative/top/translate и width/automargin

Используем div в качестве контейнера. Центрируемое содержимое оборачиваем в другой div. Для вертикального центрирования используем абсолютное позиционирование и сдвиг внутреннего div. Для горизонтального центрирования приписываем внутреннему div ширину и ставим margin: auto;. NB: Содержимое внутреннего div  не должно выходить за его границы.

See the Pen ZQrdMK by Kirill Shabunov (@kshabunov) on CodePen.

Достоинства: соответствует современным принципам верстки, позволяет использовать адаптивный дизайн, использует меньше вложенных контейнеров, чем CSS3 таблица.

Недостатки: требуется установка ширины содержимого, что не всегда приемлимо. Кроме того, это, хоть и не сложный, но CSS-трюк, а любой трюк затрудняет понимание CSS.

CSS Flexbox

Используем flexbox с вертикальным направлением элементов.

See the Pen RrQzed by Kirill Shabunov (@kshabunov) on CodePen.

Достоинства: соответствует современным принципам верстки, позволяет использовать адаптивный дизайн, имеет самую простую из возможных структуру HTML, дает дополнительные возможности по распределению элементов внутри контейнера.

Недостатки: IE поддерживает flexbox с некоторыми ошибками.

Выводы

  • В настоящее время лучшим решением является flexbox.
  • Если нельзя использовать flexbox, выбираем между вторым и третьим вариантами, в зависимости от того, какой HTML допустим.
  • В случае, если документ по смыслу является таблицей, лучше пользоваться CSS таблицей.
  • Если требуется поддерживать очень старые версии IE, придется использовать HTML таблицу.
HTML/CSS