Способы вертикального выравнивания по центру в CSS. Способы размещения блоков горизонтально Позиционирование блока по центру

17.10.2023

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

Начнем с общего описания задачи.

Задача вертикального центрирования

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

Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

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

Метод line-height

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

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

HTML:

Нужный текст

CSS:

#child { line-height: 200px; }

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

Центрирование изображения с помощью line-height

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

HTML:

CSS:

#parent { line-height: 200px; } #parent img { vertical-align: middle; }

Значение свойства line-height должно быть больше высоты изображения.

Метод таблиц CSS

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

Примечание: Таблица CSS не является тем же, что и HTML таблица.

HTML:

Содержание

CSS:

#parent {display: table;} #child { display: table-cell; vertical-align: middle; }

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

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

Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

Абсолютное позиционирование и отрицательные поля

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

В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

HTML:

Содержание

CSS:

#parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }

Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

Данный метод работает не во всех браузерах.

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

В коде примера выполняется центрирование по вертикали и горизонтали.

HTML:

Содержание

CSS:

#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }

Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

К сожалению, данный метод не работает в IE7 и ниже.

Равные отступы сверху и снизу

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

HTML:

Содержание

CSS:

#parent { padding: 5% 0; } #child { padding: 10% 0; }

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

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

Например, если родительский элемент имеет высоту 400 px, а вложенный элемент - 100px, то необходимы отступы 150px сверху и снизу.

150 + 150 + 100 = 400

Использование % позволяет расчеты оставить браузеру.

Данный метод работает везде. Обратной стороной является необходимость в расчетах.

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

Плавающий div

Данный метод использует пустой элемент div , который плавает и помогает управлять положением нашего вложенного элемента в документе. Обратите внимание, что плавающий div размещается до нашего вложенного элемента в коде HTML.

HTML:

Содержание

CSS:

#parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

Так как данный div является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both , но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div .

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.

Заключение

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

Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.

Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.

Из чего выбрать или методы

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

метод «Float»
метод «Inline-block»
метод «Table-cell»

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

«Для рывка» или немного теории

Все структурные элементы HTML можно условно разделить на:

Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.

Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div .

Наглядный пример встроенных и блочных структур приведен ниже:

Метод «Float»

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

Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float .

CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.

Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.

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

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" > Строим < div class = "bblock" > горизонтальный < div class = "bblock" > ряд < div class = "bblock" > из дивов

И внешнюю таблицу стилей с следующим содержимым:

div { float: left; /*Задаем обтекание*/ line- height: 120px; font- size: 40px; background: dodgerblue; color: white; margin- top: 60px; width: 320px; /*Фиксируем ширину блока*/ }

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

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

float: right;

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

Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:

< div style= "clear: both;" >

В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right . Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?

Алгоритм действий следующий.

< div class = "wrap" > < div class = "bblock" > Строим < div class = "bblock" > горизонтальный < div class = "bblock" > ряд < div class = "bblock" > из дивов

Wrap { width: 1310px; /*фиксируем ширину обертки*/ margin: 0 auto; /*центрируем ее*/ background: darkgray; height: 120px; /*Задаем высоту обертки*/ } . bblock { float: left; /*Задаем обтекание*/ line- height: 120px; /*Высота строки + верт. центрирования текста*/ font- size: 40px; background: dodgerblue; color: white; width: 320px; /*Фиксируем ширину блока*/ margin- right: 10px; text- align: center; /*Центрируем текст по горизонтали*/ } . wrap : last- child { margin- right: 0px; /*Убираем поле последнего div-а*/ }

В результате получаем такую картину:

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

Важно!!!

Метод «Inline-block»

Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?

Встречайте, гвоздь программы – свойство display: inline-block .

display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.

Блочно-строчный элемент имеет следующие свойства:

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

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

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" > Ссылка меню 1 длиннее обычного < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" > Ссылка меню 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" > Ссылка меню 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" > Ссылка меню 4

Nav { display: inline- block; /*Задаем блочно-строчное отображение*/ width: 180px; /*задаем ширину блока*/ background: dodgerblue; } . string { text- align: center; /*Равняем текст по-горизонтали*/ }

В результате получаем такую менюшку:

Как видим, получилось кривовато... Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):

vertical- align: top;

Теперь наша навигационная панель выровнялась по верхней линии:

Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр!!!

Важно!!!

Для древних версий Firefox добавляем строчку:
display: - moz- inline- stack;

и оборачиваем элемент в дополнительную div-обертку.
IE 7 и более ранние версии - добавляем строчки:
zoom: 1 ; /*задаем hasLayout*/ * display: inline; /*звездочка – хак для IE */ _height: 250px; /*в IE6 не работает min-height*/
Замечу, что на указанные строчки избирательно реагируют конкретные браузеры (на первую – Firefox, на остальные - IE).

Метод «Table»

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

Свойства display: table (table-cell , inline-table ), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.

Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table , и дочерние элементы (ячейки), имеющие свойство display: table-cell :

< div class = "wrap" > < div class = "bblock" > Строим < div class = "bblock" > табличный < div class = "bblock" > ряд < div class = "bblock" > из дивов

Bblock { display: table- cell; font- size: 32px; width: 200px; height: 200px; background: gold; text- align: center; vertical- align: middle; } . wrap { display: table; border- spacing: 20px 20px; background- color: darkgray; }

Важно!!!

В отличии от методов «Inline-block» и «float», при уменьшении ширины окна веб-браузера, ячейки не перемещаются вниз.
У вас нет возможности задавать свойство margin для ячеек псевдотаблицы.
Кросс-браузерность. Свойства из семейства display: table* не поддерживаются IE6, IE7. Кроме того, в IE8 вы можете наблюдать динамическую ошибку рендеринга псевдотабличных элементов в виде рандомно пропадающих ячеек. Данная ошибка чаше всего проявляется при первичной прорисовке документа

Выравнивание элементов по центру в CSS - это одна из самых популярных причин чтобы пожаловаться на CSS. «Почему всё так сложно?» - возмущаются они. Мне кажется, что проблема заключается не в том что это трудно сделать, а в том что способов для выравнивания элементов по центру очень много и бывает достаточно сложно выбрать из них подходящий.

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

Итак, мне нужно выравнять элемент по центру...

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

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

Center-children { text-align: center; }

Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.

Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:

Center-me { margin: 0 auto; }

Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.

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

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

Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox :

Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:

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

Вертикальное выравнивание по центру в CSS немного сложнее.

Выравнивание по центру строкового или строково-* элемента

Выравнивание элемента с одной строкой

Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .

Link { padding-top: 30px; padding-bottom: 30px; }

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

Center-text-trick { height: 100px; line-height: 100px; white-space: nowrap; }

Выравнивание многострочного элемента

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

Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.

Flex-center-vertically { display: flex; justify-content: center; flex-direction: column; height: 400px; }

Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота (px , % , и другие), вот почему здесь у контейнера задана высота.

Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.

Ghost-center { position: relative; } .ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .ghost-center p { display: inline-block; vertical-align: middle; }

Выравнивание по центру блочного элемента

Выравнивание элемента с известной высотой

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

Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:

Parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */ }

Выравнивание элемента с неизвестной высотой

Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:

Parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }

Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox .

Parent { display: flex; flex-direction: column; justify-content: center; }

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

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

Выравнивание элемента с фиксированной шириной и высотой

Использование отрицательных отступов (maring) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:

Parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }

Выравнивание элемента с неизвестной шириной и высотой

Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:

Parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Выравнивание элемента с помощью Flexbox

Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:

Parent { display: flex; justify-content: center; align-items: center; }

Выравнивание элемента с помощью CSS Grid

Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:

Body, html { height: 100%; display: grid; } span { /* thing to center */ margin: auto; }

Вывод

Теперь вы можете всё что угодно выравнять по центру в CSS.

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

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

Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

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

1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

...

Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

Chrome 4.0+
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }