Горизонтальное выравнивание блоков css

Абсолютное горизонтальное и вертикальное центрирование

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.

Достоинства

• Кроссбраузерность (включая IE 8-10)
• Никакой дополнительной разметки, минимум стилей
• Адаптивность
• Независимость от padding (без box-sizing!)
• Работает для изображений

Недостатки

• Должна быть задана высота (см. Variable Height)
• Рекомендуется задать overflow: auto, чтобы контент не расползался
• Не работает на Windows Phone

Совместимость с браузерами

Метод был протестирован, и прекрасно работает в Chrome, Firefox, Safari, Mobile Safari и даже IE 8-10. Один пользователь упоминал, что контент не выравнивается по вертикали на Windows Phone.

Внутри контейнера

Контент, размещенный в контейнер с position: relative будет прекрасно выравниваться:

С использованием viewport

Установим для контента position: fixed и зададим z-index:

Адаптивность

Главное преимущество описываемого способа — это прекрасная работа, когда высота или ширина задана в процентах, да еще и понимание min-width/max-width и min-height/max-height.

.Absolute-Center.is-Responsive

Смещения

Если на сайте присутствует фиксированная шапка или требуется сделать какой-то другой отступ, просто нужно добавить в стили код вроде top: 70px; Пока задан margin: auto; блок с контентом будет корректно центрироваться по высоте.

Еще можно выравнивать контент по нужной стороне, оставляя центрирование по высоте. Для этого нужно использовать right: 0; left: auto; для выравнивания справа или left: 0; right: auto; для выравнивания слева.

Много контента

Для того, чтобы большое количество контента не позволяло верстке разъезжаться, используем overflow: auto. Появится вертикальная прокрутка. Также можно добавить max-height: 100%; если у контента нет дополнительных отступов.

Изображения

Способ отлично работает и для изображений! Добавим стиль height: auto; тогда картинка будет масштабироваться вместе с контейнером.

Изменяемая высота

Описываемый способ требует заданной высоты блока, которая может быть указана в процентах и контролироваться с помощью max-height, что делает метод идеальным для адаптивных сайтов. Один из способов не задавать высоту — использование display: table. При этом блок контента центрируется независимо от размера.

Могут возникнуть проблемы с кроссбраузерностью, возможно следует использовать способ с table-cell (описан ниже).

• Firefox/IE8: использование display: table выравнивает блок вертикально по верхней границе документа.
• IE9/10: использование display: table выравнивает блок по левому верхнему углу страницы.
• Mobile Safari: если ширина задана в процентах, страдает горизонтальное центрирование

Другие способы

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

Отрицательный margin

Наверное, самый популярный способ. Подходит, если известны размеры блока.

• Не адаптивный
• Ползет верстка, если в контейнере слишком много контента
• Приходится компенсировать отступы или использовать box-sizing: border-box

Использование transform

Один из самых простых способов, поддерживает изменение высоты. Есть подробная статья на эту тему — «Centering Percentage Width/Height Elements» от CSS-Tricks.

• Не работает в IE 8
• Использование префиксов
• Может мешать работе других эффектов с transform
• В некоторых случаях при рендеринге размываются края блока и текст

Table-cell

Возможно один из самых лучших и простых способов. Подробно описан в статье «Flexible height vertical centering with CSS, beyond IE7» от 456bereastreet. Главный недостаток — дополнительная разметка: требуется аж три элемента:

.Pos-Container.is-Table < display: table; >.is-Table .Table-Cell < display: table-cell; vertical-align: middle; >.is-Table .Center-Block

• Изменяемая высота
• Верстка не едет при большом количестве текста в блоке
• Кроссбраузерность

Flexbox

Будущее CSS, flexbox будет решать множество сегодняшних проблем верстки. Подробно об этом написано в статье Smashing Magazine, которая называется Centering Elements with Flexbox.

• Контаент может быть любой высоты или ширины
• Может использоваться в более сложных случаях

• Нет поддержки IE 8-9
• Требуется контейнер или стили в body
• Требует множество разнообразных префиксов для корректной работы в современных браузерах
• Возможные проблемы производительности

Итог

Каждый способ имеет преимущества и недостатки. По сути, выбор сводится к выбору браузеров, которые должны поддерживаться

Источник

Центрируй, властвуй, располагай

Всем привет, с вами Кирилл Мыльников, frontend разработчик компании Usetech.

Сегодня я хочу рассказать о вертикальном и горизонтальном центрировании CSS (Cascading Style Sheets). В сети есть много статей на эту тему, но я хочу выделить все виды горизонтального и вертикального центрирования с примерами.

Тема довольно популярная для тех, кто просто верстает или занимается полноценной frontend-разработкой (ведь нам всегда нужно что-то центрировать).

Существует множество способов, как нужно отцентрировать элемент, в тех или иных ситуациях, каждый способ по своему хорош.

В этой статье я разберу следующие виды центрирования:

— Горизонтальное центрирование;
— Вертикальное центрирование;
— Горизонтальное и вертикальное центрирование.

Горизонтальное центрирование

1. Данное свойство подходит только для инлайновыйх (inline) элементов, достаточно указать text-align: center родителю.

2. Для центрирования блочных элементов свойство text-align: center уже не подойдет. Есть простое распространённое свойство margin: 0 auto. Всё, что нам нужно, это знать ширину блока, а свойство margin 0 auto задаст следующие значения: сверху и снизу будет 0, а по бокам размеры будут заданы автоматически и блочный элемент встанет по центру.

3. Центрирование через margin это, конечно, хорошо, но есть ещё гибкое свойство display: flex. Нам нужно задать данное свойство родителю display: flex и justify-content: center — выравнивает элемент по центру.

4. Следующее свойство — это display: grid.

Алгоритм действий как с display: flex: задать данное свойство родителю и указать justify-content: center.

Сегодня свойства grid и flexbox очень популярны в web разработке. Далее я покажу, как при помощи этих свойств можно центрировать элементы по горизонтальной и вертикальной осям.

5. Сейчас я покажу необычное сочетание свойств text-align + display: inline-block.
Да, так тоже можно отцентрировать блочный элемент или элементы, если вам это необходимо. В самом первом примере я говорил, что свойство text-align применяется только для инлайновых элементов, но если мы укажем свойство блочному элементу display: inline-block, то он станет блочно-строчным. Это означает, что свойство text-align станет доступным и элемент встанет по центру.

Небольшая подсказка: display: inline-block нужно будет задавать не родительскому блоку, а каждому из блоков, к которым мы хотим применить данное свойство. И вновь показываю на примере.

Мы разобрались с горизонтальным центрированием, теперь перейдём к вертикальному.

Вертикальное центрирование

1. Данное свойство подходит для таблиц — это vertical-align: middle.

При использовании этого типа центрирования нужно учитывать следующие условия:

• Прописываем display: table родителю;
• Дочернему элементу должны прописать display: table-cell, чтобы элемент стал ячейкой;
• Прописываем ячейке свойство vertical-align: middle и всё, элемент становится по центру.

2. Есть такой случай, когда высота центрируемого элемента известна, а высота родителя может быть любой. Здесь мы можем применить абсолютное позиционирование. Сейчас по пунктам разберём, что конкретно нужно сделать.

• Задать дочернему элементу position: absolute и опустить top: 50%;
• Так как у дочернего элемента высота может быть любая, мы должны эту высоту разделить на 2 и результат прописать в margin-top в отрицательном значении.

3. Когда нам нужно центрировать строку уже с известной высотой, мы просто можем указать line-height и указать ту же высоту.

4. Центрируем с помощью внутренних отступов (padding):

5. Ещё один способ вертикального центрирования с помощью vertical-align. Я рассматривал это свойство выше, но на примере с таблицами. Помимо этого, свойство ещё работает с display: inline/inline-block. Проще говоря, с инлайновыми элементами.

Вы должны учесть следующие условия:

• Высота родителя должна быть известна, а центрируемого элемента нет;
• Свойство line-height наследуется, поэтому надо знать корректную высоту строки.

6. Разберём еще один случай, когда высота центрируемого элемента неизвестна. Здесь нам снова поможет абсолютное позиционирование. Давайте подробно опишем, что мы должны сделать.

• Указываем дочернему элементу position: absolute и элемент опускаем в top: 50%;
• Затем в нашем элементе мы прописываем свойство transform: translate (-50%) и всё, наш элемент находится на центре.

7. Способ вертикального центрирования с помощью свойства display: flex. С этим свойством можно отцентровать элементы по вертикали. Для этого необходимо задать родителю следующие свойства: display: flex, flex-direction: column, justify-content: center.

8. Способ вертикального центрирования с помощью display: grid. В случае с вертикальным центрированием тут всё намного проще, чем с flexbox. Нам нужно указать родителю следующие свойства: display: grid и align-items: center

9. Следующий случай, когда высота дочернего элемента неизвестна и родитель неизвестен. Чтобы задать центрирование, нам нужно:

• Дочернему элементу задать position: absolute, top: 0, bottom: 0, в результате чего он растянется на всю высоту внешнего блока;
• Задаем значение margin: auto 0 дочернему элементу для вертикальных отступов внутреннего блока.

10. Заключительный способ в вертикальном центрировании: если неизвестна высота родителя и дочернего элемента, то нам поможет псевдоэлемент before.

• Родителю указываем псевдоэлемент before, прописываем display: inline-block и указываем высоту в 100%. Таким образом мы занимаем всю допустимую высоту;
• Центрируемый блок выравниваем по центру с помощью vertical-align: middle.

Горизонтальное и вертикальное центрирование

Пришло время для центрирования элементов по вертикали и горизонтали. Давайте рассмотрим на конкретных примерах.

1. Если есть случаи, когда высота и ширина элемента неизвестны, нужно сделать следующее: указать дочернему элементу свойства position: absolute, top: 50%, left: 50% и transform: translate(-50%, -50%).

2. Мы возвращаемся к flexbox, который выручает нас как никто другой. Нам нужно знать высоту и задать такие свойства: display flex; justify-content: center, align-items: center.

3. Grid тоже не сидит на месте: свойства почти идентичны, но мы задаем display: grid вместо flex соответственно. Перед использованием grid посмотрите поддержку данного свойства в браузерах.

4. Бывают ситуации, когда ширина и высота элемента фиксированные, а для этого нам нужно:

• Сделать отступы с отрицательными значениями;
• Задать position: absolute со значениями top: 50%, left: 50% это и отцентрирует элемент родителя.

5. Если мы хотим центрировать инлайновый элемент (inline, inline-block), то нам нужно свойство vertical-align. Для этого надо указать родителю псевдоэлемент before (этот пример я показывал выше), но в данном случае мы должны центрировать элементы по обе оси — вертикальной и горизонтальной. Для этого мы должны указать родителю text-align: center.

6. Ранее я уже рассказывал, как можно центрировать элементы в таблицах, но на примере с вертикальным центрированием. В случае с вертикальным и горизонтальным центрированием, вы можете вернуться к тому шагу и в добавлении указать ячейке свойство text-align: center.

Итак, мы разобрали все способы центрирования в CSS. Каждый способ уникален по своему и выбирать их нужно по ситуации. А каким из способов пользуетесь вы?

Источник