Все про CSS-выравнивание: способы и примеры

Веб-разработчику важно не только поставить контент на страницу сайта, но и сделать это красиво. Для этого важно знать, как выровнять блок по центру в CSS. Главная сложность в том, что язык существует с 1996 года, и за это время скопилось много способов выровнять блок по центру. В этой статье рассмотрим основные и самые удобные подходы к тому, как отцентровать блок в CSS.

Освойте профессию «Frontend-разработчик»

Подготовка проекта

Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
2 400 ₽/мес 4 000 ₽/мес

Все примеры выравнивания будем рассматривать на блоках

 
Текстовый блок
 

body < font-family: Tahoma, sans-serif; background-color: rgb(18, 18, 18); >.parent < border: 4px solid rgb(113, 187, 122); border-radius: 10px; margin: 15px; padding: 10px; >.child

Теперь на странице есть блок с текстом, но он по умолчанию выравнивается по верхнему левому краю. Если в HTML добавить еще один блок с текстом, то он добавится под первым. Он также не будет отцентрирован.

 
Текстовый блок 1
 
Текстовый блок 2
 

Выравнивание по горизонтали

Для выравнивания по горизонтали в CSS предусмотрено несколько способов. Сперва рассмотрим наиболее простые и перейдем к продвинутым, построенным на модели веб-макета Flexbox.

Автоотступы

Горизонтальное выравнивание в CSS — это расстановка отступов по левому и правому краю блока. В СSS для этого есть свойства margine-left и margine-right . Для них можно устанавливать значения вручную, а можно доверить эту задачу CSS. Для этого выберите автоматическое управление отступами с помощью значения auto и установите ширину блоков с помощью свойства width .

 
Текстовый блок 1
 
Текстовый блок 2
 

.child

Когда у вас на странице несколько блоков, автоотступы помещают каждый новый элемент под прошлым и формируют стопку из блоков. Это важно учитывать при выборе способа выравнивания. Чтобы выровнять блок по центру корректно, автоотступы следует применять для дочерних блоков. Родительские оставляем без изменения.

Inline-блоки

С помощью строчных элементов удобнее всего выполнять именно горизонтальное выравнивание по центру в CSS. Для этого есть готовый метод text-align: center , примените его к родительскому блоку. Чтобы выравнивание корректно сработало, к дочерним блокам добавьте свойство display: inline-block .

 
Текстовый блок 1
 
Текстовый блок 2
 

.parent < text-align: center; >.child

Плюс inline-блоков в том, что их ширина автоматически подстраивается под содержимое. Поэтому ее уже не надо указывать с помощью свойства width . Если применить такой тип центровки в CSS к нескольким блокам, то они будут расположены в строчку, но с разной высотой, если содержимое отличается.

Flexbox

Flexbox — один из самых удобных способов выравнивания практически для любого типа контента и блоков. Для горизонтального выравнивания в Flexbox к родительскому блоку примените свойство display: flex , чтобы блок стал flex-контейнером. Используйте justify-content: center , чтобы выровнять по горизонтали дочерние элементы.

 
Текстовый блок 1
 
Текстовый блок 2
 

.parent

В случае с Flexbox ширина и высота блоков автоматически подстраиваются под содержимое. Если применить такой тип выравнивания по центру к нескольким блокам, то они будут выстраиваться в одну линию.

Выравнивание по вертикали в CSS

В примерах вертикального выравнивания в CSS будем также использовать родительские и дочерние блоки

Свойства position и transform

Этот способ центрирования по вертикали –– один из самых сложных. Придется применять много свойств, и важно ничего не пропустить, иначе блок выравнивается по одной из своих границ, а не по центру. Сначала передайте родительскому блоку свойство position: relative и задайте высоту 100 пикселей с помощью свойства height . После этого к дочернему блоку надо применить свойство position: absolute . Теперь можно выполнить сдвиги блока относительного родительского с помощью свойств top и position .

 
Текстовый блок 1
 

.parent < position: relative; height: 100px; >.child

Flexbox

Для вертикального выравнивания надо сделать родительский блок flex-контейнером с помощью свойства display: flex и указать тип выравнивания с помощью свойства align-items .

 
Текстовый блок 1
 

.parent

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Центрирование

Чаще всего блоки необходимо разместить по центру контейнера или страницы. Для этого потребуются приемы выравнивания по горизонтали и вертикали. Их комбинация задаст правильное центрирование.

Свойства position и transform

Свойства position и transform мы уже применяли для выравнивания по вертикали. Для центрирования можно взять свойства для вертикального выравнивания, добавить left: 50% и изменить значение transform на translate (-50%, -50%) .

 
Текстовый блок 1
 

.parent < position: relative; height: 100px; >.child

Если попробовать выровнять таким образом несколько блоков, то они наложатся друг на друга.

 
Текстовый блок 1
 
Текстовый блок 2
 
Текстовый блок 3
 

Flexbox

Для выравнивания по центру с помощью Flexbox необходимо просто объединить вертикальное и горизонтальное выравнивания.

 
Текстовый блок 1
 

.parent

Способ удобен тем, что новые блоки будут располагаться рядом.

 
Текстовый блок 1
 
Текстовый блок 2
 
Текстовый блок 3
 

Grid

Выравнивание с помощью Grid-макета похоже на Flex. Этот способ удобный, потому что не нужно заранее знать размеры блоков и применять к ним много свойств. Сначала сделайте родительский блок grid-контейнером с помощью свойства display: grid . Дочерним элементам установите автоматические отступы через margin: auto .

 
Текстовый блок 1
 

.parent < display: grid; height: 100px; >.child

Если начать добавлять новые дочерние блоки, то они будут располагаться стопкой друг под другом.

 
Текстовый блок 1
 
Текстовый блок 2
 
Текстовый блок 3
 

Выравнивание текста в CSS

• left — по левому краю;
• right — по правому краю;
• center — по центру;
• justify — по ширине.

Рассмотрим на примере четыре вида выравнивания текста, сохранив стили из прошлых примеров.

 
Текстовый блок left
 
Текстовый блок right
 
Текстовый блок center
 
CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») -- формальный язык декорирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.
 

.left < text-align: left; >.right < text-align: right; >.center < text-align: center; >.justify

Значения left , right и center выравнивают текст согласно своим названиям. При этом выравнивается только текст относительно своего блока. Сами блоки продолжают занимать всю ширину родителя. Значение justify используется редко из-за того, что оно добавляет неравномерные пробелы. Такой способ применяют только для верстки книг или научных работ.

Свойство text-align можно использовать для выравнивания текста, блоков, заголовков, форм и списков. К примеру, можно расположить по центру заголовок.

 
Заголовок
 

.header

Выравнивание изображений

Если изображение обернуто в контейнер, то к нему можно применять обычные свойства выравнивания. Поэтому даже картинку на странице можно выровнять с помощью Flexbox или text-align .

Flexbox

Для того чтобы выровнять изображение с помощью Flexbox, превратите родительский блок в flex-контейнер с помощью свойства display: flex . После этого добавьте к нему свойства центрирования.

.parent

Если добавить на страницу несколько изображений, то они будут располагаться рядом друг с другом.

.parent

Свойство text-align

К родительскому блоку можно применять свойство text-align и установить ему значение center . Так вы выровняете изображение и все содержимое блока.

.parent

Свойства position и transform

Свойства position и transform также можно применять к изображениям. При этом мы можем выравнивать только изображение, не затрагивая другие элементы в родительском блоке.

.parent < width: 500px; height: 500px; position: relative; >.img

Теперь добавим заголовок и увидим, что он не сместился в центр и остается на своем месте.

 
Заголовок
 

.parent < width: 500px; height: 500px; position: relative; >.img < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >.header

Итог

В CSS большое разнообразие подходов к выравниванию элементов. Главная сложность — выбрать подходящий под вашу задачу. Решая, какой способ выравнивания в CSS самый удобный, помните:

• Flexbox удобно использовать практически для всех типов выравнивания и для любого контента;
• свойство text-align позволяет выравнивать не только текст, как это может показаться из названия, но и формы, заголовки, списки, блоки и изображения;
• сетку Grid удобно использовать для центрирования элементов внутри родительского блока.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Выравниваем блок по центру страницы

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; >.block < width: 250px; height: 250px; position: absolute; top: 50%; left: 50%; margin: -125px 0 0 -125px; img < max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; >> 

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; >.block < width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img < max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; >> 

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

.parent < width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; .inner < display: table-cell; text-align: center; vertical-align: middle; >> .block < display: inline-block; img < display: block; border: none; >> 

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/xkb615mu.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &::before < height: 100%; display: inline-block; vertical-align: middle; content: ''; >> .block < display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img < display: block; border: none; >> 

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

.parent < position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &::before < height: 100%; display: inline-block; vertical-align: middle; content: ''; >> .block < display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img < display: block; border: none; >> 

Вариант 5. Flexbox.

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

.parent < width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; >.block < background: #60a839; img < display: block; border: none; >> 

В случае, если при уменьшении родительского блока дочерний не должен обрезаться по краям, используйте авто маржины:

.parent < width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; overflow: auto; >.block < margin: auto; background: #60a839; img < display: block; border: none; >> 

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

.parent < width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; >.block < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); img < display: block; >> 

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; appearance: none; >.block < display: inline-block; img < display: block; border: none; >> 

Бонус

Используя идею 4-го варианта, можно задавать внешние отступы для блока, и при этом последний будет адекватно отображаться в окружении скроллбаров.
Пример: jsfiddle.net/serdidg/ugnp8ry7.

Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя.
Пример: jsfiddle.net/serdidg/Lhpa1s70.
Пример с большой картинкой: jsfiddle.net/serdidg/tor2yudn.

Как выровнять блоки в css

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

Выравнивание блоков по центру

В css выровнять блок по центру легко. Это самый известный многим прием, но о нем я хотел бы рассказать именно сейчас, в первую очередь. Здесь подразумевается выравнивание по центру по горизонтали относительно родительского элемента. Как оно осуществляется? Допустим, у нас есть контейнер и в нем наш подопытный:

Предположим, что это шапка сайта. Она не тянется на всю ширину окна и нам надо ее отцентрировать. Пишем так:

width / max — width : 800px ;
margin : 0 auto ;

Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!

Выравнивание текста

Это тоже очень простой прием. Для выравнивания всех строчных элементов можно использовать свойство text-align и его значения: left, right, center. Последнее центрирует текст, что нам и нужно. Таким же образом можно выровнять даже картинку, потому что она тоже по умолчанию является строчным элементом.

Выравнивание текста по вертикали

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

Задать высоту блока с помощью внутренних отступов. Способ заключается в том, чтобы не задавать явную высоту с помощью height, а создать ее искусственно с помощью paddingов сверху и снизу, которые должны быть одинаковы. Создадим любой блок и запишем ему такие свойства:

background : #ccc;
padding : 30px 0 ;

Фон просто для того, чтобы визуально видеть края, а также внутренние отступы. Теперь высоту блока составляют два этих отступа и сама строка, а выглядит все это так:

Определить для блока line-height. Мне кажется, это более правильный способ, если вам надо выровнять одну строчку текста. При нем вы можете записать высоту по нормальному, с помощью свойсва height. После этого ему же нужно задать высоту строки, такую же, как и высота блока в целом.

height : 60px ;
line — height : 60px ;

Результат будет аналогичен вышеприведенной картинке. Все будет работать, даже если вы добавите внутренние отступы. Однако, только для одной строки. Если вам нужно больше текста в элементе, то данный способ работать не будет.

Преобразовать блок в ячейку таблицы. Суть этого метода в том, что для ячейки таблицы действует свойство vertical-align: middle, которое центрирует элемент по вертикали. Соответственно, в этом случае блоку нужно задать следующее:

display : table — cell ;
vertical — align : middle ;

Этот способ хорош тем, что вы сможете выровнять сколько угодно текста по центру. Но блоку, в который вложен наш div лучше прописать display: table, иначе может не работать.

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

Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.

Этот способ позволяет сделать центровку только когда размеры позволяют сделать вычисления. А если у вас родитель 887 пикселей в высоту, то точно записать ничего не получится, это и так понятно.

Вставить элемент в ячейку таблицы. Опять же, если мы преобразуем родительский элемент в ячейку таблицы, то вставленный в него блок автоматом отцентрируется по вертикали. Для этого родителю всего лишь нужно задать vertical-align: middle.

А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!

Использовать абсолютное позиционирование. Об этом способе мало кто знает. Нужно вставить в css такой код:

Вертикальное и горизонтальное центрирование всего и вся в CSS Flexbox

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

Эта статья одна из завершающих из цикла переводов про CSS Flexbox. Скоро все они будут скомпонованы в один большой, понятный и объёмный гайд по изучению CSS Flexbox.

��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️

В примерах с навигацией используется пример кода отсюда.

Разочаровались в попытках использования CSS для выравнивания по центру с div ’ами, изображениями и текстом?

Вообще, выравнивание горизонтально и вертикально в CSS всегда было таким, каким-то странным и зачастую не таким, как вообще задумывалось. Я успел применить буквально все хаки в этом направлении за последние несколько лет.

К сожалению, во флотах нет опции center , только left и right . Ну и конечно же там нет опции vertical-center .

CSS Flexbox исправил эти недочеты. Теперь у вас больше контроля над выравниванием HTML элементов, включая опцию идеального центрирования буквально всего, что только можно.

Вообще, во Flexbox стало очень легко отцентровывать текст, изображения и div ’ы. Но это не означает того, что это единственный способ центрировать контент.

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

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

Как отцентровать текст в CSS с помощью text-align

Если вам нужно отцентровать текст c CSS внутри элемента, например div ’а, заголовка или параграфа, вы можете смело использовать свойство text-align .

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

Вот три вещи, которые нужно обязательно знать правильного использования text-align , чтобы горизонтально отцентровать текст или элементы потомки.

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

Родительский элемент должен иметь text-align: center .

Если вы центрируете элемент, то его свойство display должно быть с inline-block .

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

text-align имеет несколько свойств:

center : текст отцентрован.

left : текст выровнен по левой стороне контейнера.

right : текст выровнен по правой стороне контейнера.

justify : текст выстраивается ровно по левой и правой граням контейнера, за исключением последней строки.

justify-all : выравнивает последнюю строку.

start : тоже самое, что и left , если написание идёт слева направо. Но будет right , если написание справа налево.

end : start, только наоборот.

match-parent : тоже, что и inherit , но только start и end высчитываются с учетом родительского элемента.

Используйте эти свойства для выравнивания текста внутри родительского элемента или div ’а врапера. Тут всё обыденно и просто.

Выравниваем элементы горизонтально с text-align

Вы можете смело использовать свойство text-align , чтобы выравнивать элементы потомки.

Хороший пример — центровка панели навигации. Это может показаться тягомотиной, так как ширина каждого элемента меню зависит от его текста.

Вообще, центрирование куда проще, если вы знаете точную ширину родителя и его потомков.

Вы можете применить text-align: center для врапера панели навигации. А внешний “родительский” элемент, то есть ul , должен быть с dispay: inline-block .

.navbar text-align:center; 
width: 100%;
>
.navbar ul display:inline-block;
>
.navbar li float:left;
>
.navbar li + li margin-left:20px;
>

Ну, а чтобы элементы меню выглядели выровненными, поставим им float: left .

И теперь у вас горизонтально выровненное меню.

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

В наше время у нас уже есть кое-что получше, а именно CSS Flexbox.

CSS Flexbox

Flexbox был добавлен в стандарты CSS несколько лет назад, в основном для того, чтобы разобраться с распределением места и выравниванием элементов. По сути, это синтаксис одномерной раскладки.

А в купе с более новым CSS Grid, веб-разработчики получают куда более мощный инструмент для разработки сложных шаблонов, которые в последствии будет куда проще поддерживать.

Мы говорим, что это одномерный контроль раскладки, но на самом деле у него есть оси x и y. Как вы увидите далее, выравнивание в каждом случае будет происходить с разными свойствами.

Flexbox уже поддерживается всеми современными браузерами, включая даже Internet Explorer, который скоро прикроют. В общем, вы можете смело и уверенно использовать Flexbox в вашем CSS.

Центрируем текст горизонтально и вертикально, используя CSS для выравнивания по центру

Центрирование текста по абсолютному центру традиционно было было одной из самых распространенных проблем с костыльными решениями, которые решил Flexbox. В прошлом было неимоверно много хаков и костылей, таких как использование display: table и т.п. Как я и упоминал ранее, Flexbox сделал этот сложный и неестественный процесс куда более проще.

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

How to Center 
Anything with HTML & CSS
 

Это div с элементами заголовков. Мы будем использовать CSS не только для горизонтального центрирования, но и для вертикального. Вы можете вставить любые элементы потомки, такие как

или . Вообще очень крутая штука в CSS Flexbox в том, что его инструментарий может центрировать вертикально и горизонтально буквально всё, что только можно!

.text-example display: flex; 
align-items: center; 
justify-content: center; 
flex-direction: column; 
width: 100%; 
text-align: center; 
margin: 10% 0; 
min-height: 200px; 
background-color: rgba(33, 33, 33, .3); 
align-items: center; 
>

Тут div будет занимать всю доступную ширину и будет минимум в 200px высотой. Это даст нам вертикальные маргины для использования в этом примере.

Вся магия произойдет тогда, когда вы выставите display на flex . Когда display стоит на flex , вы можете использовать дополнительные flexbox свойства для управления уже самим макетом.

align-items и justify-content это важные свойства для абсолютного центрирования текста горизонтально и вертикально. Горизонтальное центрирование происходит с помощью justify-content , а вертикальное с align-items .

align-items может использоваться не только для центровки текста вертикально, но и любого дочернего элемента.

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

Горизонтальное центрирование div’ов с использованием CSS Flexbox

Flexbox делает центровку элементов простым и естественным процессом.

Поставьте родительскому элементу .navbar display:flex; . Выставите ширину, в этом примере я хочу, чтобы панель навигации растянулась по всему вьюпорту, то есть на 100%.

Чтобы выставить по центру дочерние элементы, поставьте justify-content: center для элемента родителя.

.navbar display: flex; 
justify-content: center; 
width: 100%;
>

Чтобы сделать CSS более юзабельным, я разбил стили по разным селекторам:

.flex display: flex; 
>
 
.flex-horizontal-center justify-content: center; 
>

Это становится очень удобным при разработке комплексных страниц и когда вам нужна такая же логика в позиционировании. Мне также нравится так делать, потому что таким образом выходит проще читать разметку и накладывать образ предполагаемого макета по ней.

Вертикальное центрирование div’ов с CSS Flexbox

Горизонтальное центрирование никогда не было самым сложным моментом.

Но что у нас с вертикальным центрированием? Ну или как бы мы применили CSS, что вертикально выровнять элементы?

Во многих случаях, это тот момент, при котором большинство разработчиков рвут на себе волосы.

Тут столько правил и костылей, которые нужно запомнить, а ведь всё равно что-нибудь да порушит всю раскладку.

Flexbox наконец-то исправил проблемы с вертикальным центрированием, выдав эту кейсу четкое и понятное правило для применения.

Как и с justify-content: center , которое выстраивает элементы потомки по центру оси x, flexbox align-items: center делает это по оси y.

.flex-vertical-center align-items: center; 
>

В примере с меню в хедере, враппер навигационной панели отцентрирован вертикально.

Тут элемент хедер служит родителем для навигационной панели, и его ширина равна 100%, а min-height стоит на 80px.

Так как навигационная панель сама по себе меньше, чем 80px, то тут есть пустое место, с которым мы можем поиграться. Так мы можем сделать навигацию равноудаленной от вершины до низа хедера, добавив ему display: flex и align-items: center .

Абсолютное центрирование div’ов с использованием CSS Flexbox

Пока что мы только узнали то, как отцентрировать элементы горизонтально или вертикально. А теперь пора скомбинировать эти два метода.

Для этого я буду снова использовать панель навигации. Нам нужно, чтобы она отрендерилась в абсолютном центре хедера.

Всё, что вам для этого нужно сделать, это добавить как justify-content: center и align-items: center , ну и flex-direction: column в css для .

.flex-center align-items: center; 
justify-content: center; 
flex-direction: column; 
>

Вы можете применять эту комбинацию flexbox свойств для центровки любого элемента, а не только navbar . Изображения, div ’ы и т.п. Все они могут быть также абсолютно отцентрированы внутри родительского элемента.

Можете посмотреть на то, как я применил этот принцип на полноэкранном фоновом изображении.

Как отцентровать изображение в CSS с помощью text-align и Flexbox

Вообще, изображения могут быть выровнены с использованием свойств text-align и flexbox.

Вы можете применить text-align для элемента родителя изображения с right , left и center возможностями выравнивания.

.image-example width: 60vw; 
min-width: 360px; 
text-align: center; 
margin: 5% auto; 
background-color: #ccc; 
>

Вы также можете применить флоат слева или cправа, для размещения изображения у желаемой грани контейнера. Я склонен к тому, чтобы использовать флоат, так как обычно я выравниваю изображения внутри текста статьи.

Но тут всё ещё довольно проблематично сделать выравнивание без flexbox. Если вы примените абсолютное центрирование из флексов для контейнера изображения, то вы смело можете выставить картинку по центру обеих осей, ну или только одной, тут уже на ваш выбор.

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

Те же самые правила, что и в примере выше.

Делаем родительский элемент display: flex , он должен быть больше или равным изображению по размерам, align-items и justify-content должны иметь center, а flex-direction выставлен на column .

Теперь изображение абсолютно центрировано в HTML элементе. Вы можете прописать CSS свойства так, что поменять центровка на вертикальную или горизонтальную.

Заключение

Контроль элементов и позиционирования текста это важнейший аспект при хорошей вёрстке.

В былые времена, центрирование и выравнивание элементов были нудным делом и требовали комбинации из разных костылей.

CSS Flexbox поменял подход к выравниваю элементов. И теперь горизонтальное центрирование, также как и вертикальное стали очень простыми.

А комбинирование свойств позиционриования из Flexbox c text-align , может сделать ваши шаблоны куда привлекательнее без громоздких костылей.

Исходный код доступен на GitHub!