Требуется центрировать несколько элементов 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 таблицу.