Выравнивание по центру в CSS: приёмы, свойства, подводные камни
2026-02-21 18:26 Diff
https://skillbox.ru/media/code/vyravnivanie-po-tsentru-v-css-priyemy-svoystva-podvodnye-kamni/

#Руководства

  • 21 мар 2023
  • 0

Как расположить что угодно по центру чего угодно с помощью каскадных таблиц стилей.

Иллюстрация: Оля Ежак для Skillbox Media

Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.

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

В статье мы расскажем об основных приёмах для выравнивания по центру в CSS. Какой из них более удобен и приятен — решать вам.

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

Для наглядности мы добавим границы блоков: синие для родительских и чёрные для дочерних.

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

HTML:

<div class="parent"> <div class="child">Блок с текстом</div> </div>

CSS:

.parent { display: flex; justify-content: center; border: 2px solid blue; } .child { border: 2px solid black; }

Результат:

Изображение: Skillbox Media

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

Добавьте свойства margin-left: auto и margin-right: auto — они устанавливают автоматические отступы слева и справа. И укажите ширину с помощью width:

CSS:

.block { width: 70px; margin-left: auto; margin-right: auto; border: 2px solid black; }

HTML:

<div class="block">Блок с текстом</div>

Результат:

Изображение: Skillbox Media

Преимущество метода состоит в том, что не нужно явно прописывать свойства родительского элемента (в нашем случае это body).

Две строки с автоотступами можно заменить на одну: margin: 0 auto или margin: auto. В обоих случаях результат будет одинаковым.

Проще всего выравнивать текст по горизонтали. Для этого существует свойство text-align: center, которое применяется к родительскому элементу.

CSS:

.parent { text-align: center; border: 2px solid blue; }

HTML:

<div class="parent">Текст</div>

Результат:

Изображение: Skillbox Media

Несмотря на своё название, text-align можно применять не только к тексту. Для этого нужно сделать элементы, которые хотите выровнять, встроенными — с помощью display: inline-block.

CSS:

.parent { text-align: center; border: 2px solid blue; } .child { display: inline-block; border: 2px solid black; }

HTML:

<div class="parent"> <div class="child">Блок с текстом</div> </div>

Результат:

Изображение: Skillbox Media

В этом методе так же, как и в первом, размеры блока подстраиваются под содержимое. Но при желании можно явно задать ширину и высоту.

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

<div class="parent"> <div class="child">Блок с текстом</div> <div class="child">Блок с текстом<br>в две строки</div> <div class="child">Блок с текстом<br>в три<br>строки</div> </div>

Flex-элементы выстраиваются в один ряд и приобретают одинаковую высоту:

.parent { display: flex; justify-content: center; border: 2px solid blue; } .child { border: 2px solid black; }Изображение: Skillbox Media

С автоотступами каждый блочный элемент помещается в отдельную строку:

.block { width: 120px; margin: auto; border: 2px solid black; }Изображение: Skillbox Media

Инлайн-блоки остаются в одном ряду, но у них будет разная высота (у каждого — по размеру контента). Плюс текст в них автоматически выравнивается по центру.

.parent { text-align: center; border: 2px solid blue; } .child { display: inline-block; border: 2px solid black; }Изображение: Skillbox Media

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

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

<div class="parent"> <div class="child">Блок с текстом</div> </div>

Добавьте в родительский элемент свойства display: flex (превращает элемент во flex-контейнер) и align-items: center. Второе свойство отцентрирует весь контент внутри контейнера по вертикали.

.parent { height: 100px; display: flex; align-items: center; border: 2px solid blue; } .child { border: 2px solid black; }Изображение: Skillbox Media

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

Родительскому элементу нужно присвоить свойство position: relative, а дочернему — position: absolute. Благодаря этому мы сможем сдвинуть дочерний блок относительно верхнего края родительского, используя свойство top: 50%.

.parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; border: 2px solid black; }Изображение: Skillbox Media

Обратите внимание, что сейчас по центру расположена не середина блока с текстом, а его верхняя граница. Чтобы исправить это, дочерний элемент нужно сдвинуть на половину его высоты вверх. Делается это свойством transform: translate (0, -50%). Первое число означает смещение по горизонтали, второе — по вертикали.

.parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; transform: translate(0, -50%); border: 2px solid black; }

В результате получается так:

Изображение: Skillbox Media

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

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

.parent { height: 100px; display: table-cell; vertical-align: middle; border: 2px solid blue; } .child { border: 2px solid black; }Изображение: Skillbox Media

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

Чтобы поместить элемент по центру родительского блока (то есть выровнять одновременно по горизонтали и вертикали), иногда достаточно объединить под одним селектором методы горизонтального и вертикального центрирования.

Во всех примерах мы будем использовать один и тот же HTML-код и получать один и тот же результат.

<div class="parent"> <div class="child">Блок с текстом</div> </div>Изображение: Skillbox Media

Чтобы центрировать элемент с помощью Flexbox, достаточно объединить горизонтальный и вертикальный способы:

.parent { height: 100px; display: flex; justify-content: center; align-items: center; border: 2px solid blue; } .child { border: 2px solid black; }

В этом случае нужно сделать всё то же, что и при вертикальным центрировании, но с двумя изменениями в стилях дочернего элемента:

  • добавить свойство left: 50%;
  • установить свойству transform значение translate (-50%, -50%).
.parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid black; }

Этот способ похож на вёрстку флексами. Нужно установить в родительском элементе свойство display: grid — оно превратит его в grid-контейнер. А в дочернем задать автоматические отступы с помощью margin: auto.

.parent { height: 100px; display: grid; border: 2px solid blue; } .child { margin: auto; border: 2px solid black; }

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

Самый простой способ выровнять текст по горизонтали — использовать свойство text-align: center.

HTML:

<p class="center-text">Абзац текста, горизонтально выровненный по центру</p>

CSS:

.center-text { text-align: center; }

Результат:

Изображение: Skillbox Media

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

HTML:

<p class="center-text">Абзац текста, выровненный по центру, ограниченный справа и слева</p>

CSS:

.center-text { width: 100px; margin: auto; text-align: center; }

Результат:

Изображение: Skillbox Media

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

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

Flexbox. В этом случае нужно задать стили только для родительского элемента, а для дочернего CSS-кода можно не писать.

HTML:

<main class="parent"> <p class="child">Абзац с текстом, вертикально выровненный по центру</p> </main>

CSS:

.parent { height: 100px; display: flex; align-items: center; border: 2px solid blue; }

Результат:

Изображение: Skillbox Media

Позиционирование. Если применить к элементу <p> свойства position и transform, позиционирование будет работать некорректно из-за того, что по умолчанию у него есть отступы. Решить это можно двумя путями.

Первый (рекомендуемый) — убрать из абзаца отступ свойством margin: 0.

HTML:

<main class="parent"> <p class="child">Абзац с текстом, вертикально выровненный по центру</p> </main>

CSS:

.parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; transform: translate(0, -50%); margin: 0; }

Второй — применить стиль дочернего элемента к тегу <span> внутри <p>.

HTML:

<main class="parent"> <p><span class="child">Абзац с текстом, вертикально выровненный по центру</span></p> </main>

CSS:

.parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; transform: translate(0, -50%);

При обоих путях результат будет один и тот же:

Изображение: Skillbox Media

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

HTML:

<main class="parent"> <p>Абзац с текстом, вертикально выровненный по центру </main>

CSS:

.parent { height: 100px; display: table-cell; vertical-align: middle; border: 2px solid blue; }

Результат:

Изображение: Skillbox Media

К заголовкам, спискам и формам применяются все те же способы позиционирования по центру, что и к обычному тексту: как по горизонтали, так и по вертикали.

Единственная особенность списков — их родителю не стоит присваивать свойство text-align: center. Выглядеть это будет плохо, можете убедиться в этом на следующем примере.

HTML:

<div class="parent"> <ul> <li>Первый пункт</li> <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> </ul> <li>Второй пункт</li> </ul> </div>

CSS:

.parent { text-align: center; border: 2px solid blue; }

Результат:

Изображение: Skillbox Media

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

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

  • в качестве родительского элемента выступает всё тело веб-страницы (элемент <body>);
  • необязательно явно указывать высоту блока.

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

Изображение: Skillbox Media

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

HTML:

<body> <div>Блок посередине</div> </body>

CSS:

body { display: flex; align-items: center; justify-content: center; border: 2px solid blue; }

Позиционирование. Дополнительное отличие от описанного выше способа в том, что не нужно указывать свойство position: relative — ведь расположение <body> не зависит ни от каких других элементов.

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

HTML:

<body> <div class="block">Блок посередине</div> </body>

CSS:

body { border: 2px solid blue; } .block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid black; }

Grid. Здесь мы задаём свойства как родительскому, так и дочернему элементу.

HTML:

<body> <div class="block">Блок посередине</div> </body>

CSS:

body { display: grid; border: 2px solid blue; } .block { margin: auto; border: 2px solid black; }

Центрирование изображений <img> и кнопок <button> в CSS работает почти так же, как и с блоками. В большинстве случаев вы можете просто использовать те же методы, о которых мы рассказывали ранее:

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

HTML:

<img src="https://skillbox.ru/local/templates/media/images/common/menu-icon-3.svg">

CSS:

<img src="https://skillbox.ru/local/templates/media/images/commonimg { height:150px; display: block; margin: auto; }/menu-icon-3.svg">

Результат:

Изображение: Skillbox Media

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

  • задана высота родительского блока;
  • не заданы размеры картинки;
  • не указано свойство align-items.

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

CSS:

.parent { height: 300px; display: flex; justify-content: center; border: 2px solid blue; }

HTML:

<div class="parent"> <img src="https://skillbox.ru/local/templates/media/images/common/menu-icon-3.svg"> </div>

Результат:

Стандартный размер этого изображения — 17 на 24 пикселя. Но здесь оно автоматически растянулось
Изображение: Skillbox Media

В остальных случаях флексбоксы будут работать так же, как и с блочными элементами.

Основная сложность при выравнивании элементов веб-страницы по центру — обилие подходов, у каждого из которых свои тонкости и ограничения:

  • Flexbox удобен для любого вида выравнивания. При таком подходе необходимо задавать стили только родительскому элементу.
  • Позиционирование можно использовать для выравнивания по вертикали и размещения элемента по центру блока (выравнивания по вертикали и горизонтали одновременно).
  • Автоотступы и inline-блоки удобно использовать для горизонтального выравнивания, ячейки таблицы — для вертикального, Grid — для размещения элемента по центру родительского блока.
Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе