Align-items

Содержание:

Вертикальное и горизонтальное центрирование в CSS уровня 3
Выравнивание картинки HTML
Центрирование по вертикали в CSS уровня 3
Выравнивание блока по центру в CSS
Свойство для вертикального выравнивания vertical-align
Советы по центрированию с помощью CSS
Использование авто отступов для выравнивания по главной оси
Как выровнять текст по центру при помощи CSS?
Параметры white-space и word-wrap, управляющие разрывом строк
Выравнивание по горизонтальному центру строчных (inline) и строчно-блочных (inline-block) элементов
Использование flexbox для горизонтального и вертикального центрирования элементов
Вариант 3
Отступы
Адаптивное центрирование по вертикали
- Fluid vertical center
CSS Tutorial

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

Мы можем расширить оба метода, чтобы центрировать по горизонтали
и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в
том, что абзац становится ровно таким широким, каким он должен быть
(если только мы явно не укажем ширину). В примере ниже мы именно
этого и хотим: мы размещаем по центру абзац из одного слова
(“Центр!“), так что ширина абзаца должна быть равна ширине этого
слова.

Центр!

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

<div class=container4>
  <p>Центр!
</div>

В плане вертикального центрирования эта таблица стилей схожа с
таблицей из предыдущего примера. Но теперь мы ещё перемещаем
элемент на полпути через контейнер с помощью правила ‘left: 50%’ и
одновременно сдвигаем его влево на половину своей собственной
ширины в преобразовании ‘translate’:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило
‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё
легче:

Центр!

с этой таблицей стилей:

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

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

Свойства css для оформления текста html (vertical-align, text-align, text-indent и другие)

Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег <p> с определённым классом, и используя тег <style>, задать для этого класса css-свойство text-align:

PHP

<head>
<style>
.pic {
text-align: center; /* Выравнивания картинки по центру в html */
}
</style>
</head>
<body>
<p class=»pic»><img src=»images/img.jpg» width=»250″ height=»150″ alt=»pic»></p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11

<head>

<style>

.pic {

text-aligncenter;/* Выравнивания картинки по центру в html */

}

</style>

<head>

<body>

<pclass=»pic»><img src=»images/img.jpg»width=»250″height=»150″alt=»pic»><p>

<body>

<html>

Или же можно сделать еще проще и добавить в тег <img> атрибут style:

PHP

1	<pstyle=»text-align: center;»><img src=»images/horx.jpg»alt=»img»width=»394″height=»286″><p>

Центрирование по вертикали в CSS уровня 3

Vertical-align

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
Сам элемент сделайте абсолютно позиционированным (position: absolute).
Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. (
‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

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

3d текст на css

Так же, используя это свойство можно сделать в CSS выравнивание блока по центру. При этом данное свойство указываем для родительского блока, а для блока, который нужно выровнять задаем display:inline-block.

XHTML

<div class=»center-block»>
<div class=»centered»>
Выравнивание блока по центру в CSS
</div>
</div>

1
2
3
4
5

Выравнивание блока по центру в CSS
</div>
</div>

CSS

.center-block{
height:200px;
background:#E8E8FF;
border:1px solid #F0F0F0;
text-align:center;
}
.centered{
display:inline-block;
width:150px;
height:50px;
background:#8CC684;
border:1px solid #ccc;
margin-top:75px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.center-block{

height200px;

background#E8E8FF;

border1pxsolid#F0F0F0;

text-aligncenter;

}

.centered{

displayinline-block;

width150px;

height50px;

background#8CC684;

border1pxsolid#ccc;

margin-top75px;

}

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

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

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

PHP

.centered{
width:150px;
height:50px;
background:#8CC684;
border:1px solid #c1c1c1;
margin:auto;
}

1
2
3
4
5
6
7

.centered{

width150px;

height50px;

background#8CC684;

border1pxsolid#c1c1c1;

marginauto;

}

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

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

margin: 50px auto;

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

margin: 50px auto 20px auto;

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

Результат получается почти такой же:

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

Выровнять блок по центру получилось, но есть одно отличие. Как видите, тест в блоке теперь не выравнивается. Теперь, при необходимости сделать выравнивание текста по центру css, нужно для класса centered задать text-align:center.

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

А на сегодня у меня все. Желаю вам успешной работы над вашими проектами! До встречи в следующих статьях!

С уважением Юлия Гусарь

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег </p> и задаем для него стиль vertical-align:middle;

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

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

CSS

.text-vertical-al{
display:table;
}
.text-vertical-al p{
display:table-cell!important;
vertical-align:middle;
}

1
2
3
4
5
6
7
8

.text-vertical-al{

displaytable;

}

.text-vertical-al p{

displaytable-cell!important;

vertical-alignmiddle;

}

В результате у нас все заработало:

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

Для выравнивания по вертикали текста в таблице можно использовать только значения top, bottom, middle, baseline. Другие значения для таблиц не работают.

Вот еще один пример выравнивания текста по вертикали css, но именно при работе с таблицей.

Допустим вам нужно выровнять текст по вертикали для всей таблицы. В этом случае в файле CSS для класса table нужно написать следующее:

CSS

table.table-va td{
border: 1px solid #1e1e1e;
background-color: rgba(0, 146, 243, 0.13);
height: 40px;
vertical-align:middle; /* выравнивание текста по вертикали css*/
}

1
2
3
4
5
6

table.table-va td{

border1pxsolid#1e1e1e;

background-colorrgba(0,146,243,0.13);

height40px;

vertical-alignmiddle;/* выравнивание текста по вертикали css*/

}

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

CSS выравнивание по вертикали в таблице
По верху	По центу	По низу

Так же можно задать выравнивание по вертикали для каждой ячейки. В этом случае проще всего указать стили для каждого элемента в коде HTML или при помощи псевдоклассов nth-child() в CSS:

XHTML

<table class=»table-va»>
<caption>CSS выравнивание по вертикали в таблице</caption>
<tbody>
<tr>
<td style=»vertical-align:top;»>По верху</td>
<td style=»vertical-align:middle;»>По центу</td>
<td style=»vertical-align:bottom;»>По низу</td>
</tr>
</tbody>
</table>

1
2
3
4
5
6
7
8
9
10

<caption>CSS выравнивание по вертикали в таблице</caption>

<tbody>

<tr>

<td style=»vertical-align:top;»>По верху</td>

<td style=»vertical-align:middle;»>По центу</td>

</tr>

</tbody>

</table>

Вот что получится:

CSS выравнивание по вертикали в таблице
По верху	По центу	По низу

Советы по центрированию с помощью CSS

HTML используется для создания структуры, а CSS определяет стили. Так как центрирование – это визуальная характеристика, то оно осуществляется с помощью каскадных стилей.

Выравнивание текста по центру CSS

Не знаете как выровнять текст по центру CSS? Проще всего центрировать текст на веб-странице. Чтобы это сделать, нужно всего одно свойство: HTML text align:

p.center { text-align: center; }

С помощью этой строки кода каждый параграф с классом center будет центрирован горизонтально внутри своего родительского элемента.

Применения этого класса:

<p class="center">This text is centered.</p>

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

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

Блоками являются любые элементы на странице, которые устанавливаются как элементы уровня блока и имеют определенную ширину. Часто такие блоки создаются с помощью <div>.

Наиболее распространенный способ центрирования блоков – это задать для левого и правого отступов значение auto:

div.center {
 margin: 0 auto;
  width: 80em;
}

Это сокращенная форма свойства margin установит для верхнего и нижнего отступа значение , а левый и правый отступы будут использовать значение auto. Таким образом занимается все доступное место и делится равномерно между двумя сторонами, что равносильно HTML div align.

Применение в HTML:

<div class="center">This entire block is centered,
but the text inside it is left aligned.</div>

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

Как выровнять картинку по центру в HTML

Большинство браузеров отобразят изображения по центру при использовании свойства HTML text align. Но не стоит полагаться на этот метод, так как он не рекомендован W3C.

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

img.center {
 display: block;
  margin-left: auto;
  margin-right: auto;
}

Вот HTML код для изображения, которое нужно центрировать:

<img src="blwebcam-sample.jpg" alt="Suni" class="center">

Также можно центрировать объекты с помощью встроенного CSS:

<div style="text-align: center;">

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

HTML vertical align всегда было проблематичным в веб-дизайне, но с выходом спецификации CSS Flexible Box Layout Module в CSS3, появилось решение для этой задачи.

Вертикальное выравнивание работает также как и горизонтальное, описанное выше. Свойство vertical-align со значением middle:

.vcenter {
  vertical-align: middle;
}

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

Поместите элементы, которые нужно центрировать, внутрь элемента-контейнера, такого как div;
Задайте минимальную высоту элементу-контейнеру;
Объявите элемент-контейнер;
Установите для HTML vertical align значение middle.

Например:

.vcenter {
  min-height: 12em;
  display: table-cell;
  vertical-align: middle;
}

HTML код:

<div class="vcenter">
<p>This text is vertically centered in the box.</p>
</div>

Использование авто отступов для выравнивания по главной оси

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

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

На первый взгляд может показаться, что этот пример использования свойства . Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение для . Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает . Оба свойства со значениями отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

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

Как выровнять текст по центру при помощи CSS?

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

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

text-align: center; — для выравнивания по центру
text-align: left; — по левой стороне
text-align: right; — по правой стороне
text-align: justify; — по ширине блока или страницы.

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

1.Присвоить тегу блока (заголовка, формы, абзаца или другому блочному элементу) CSS класс:

PHP

<div class=”block-text”>Здесь текст</div>

1 <div class=”block-text”>Здесьтекст<div>

А затем в CSS файле вашего сайта пишем:

PHP

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

1
2
3

.block-text{

text-aligncenter;

}

Вместо block-text может быть любое другое название класса.

Также можно не присваивать новый класс, а использовать уже существующий. В этой статье с видео инструкцией я показывала как определить класс или идентификатор элемента на сайте: “Как определить ID и класс элемента на странице?”

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

PHP

.block p {
text-align: center;
}

1
2
3

.blockp{

text-aligncenter;

}

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

, которые находятся внутри тега с классом block:

PHP

<div class=”block”>
<p>Первый абзац</p>
<p>Второй абзац</p>
….
</div>

1
2
3
4
5

<div class=”block”>

<p>Первыйабзац<p>

<p>Второйабзац<p>

….

<div>

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

PHP

.block h1, .block h2, .block h3, .block h4, .block h5, .block h6 {
text-align: center;
}

1
2
3

.block h1,.block h2,.block h3,.block h4,.block h5,.block h6{

text-aligncenter;

}

Так же вы можете задать эти CSS свойства в HTML коде страницы или подключить свой отдельный CSS файл. Как это сделать написано в этой статье:«Как css подключить к html?»
2.Можно дописать нужные CSS свойства в самом теге при помощи атрибута style:

PHP

<p style=” text-align: center;”>Пример текста</p>

1 <pstyle=”text-aligncenter;”>Примертекста<p>

Этот способ, так же как и атрибут align или тег center, удобен только в тех случаях, когда выравнивание нужно сделать в одном или нескольких местах. Для массового выравнивания текста я его не рекомендую использовать.

Описанные выше способы помогут вам выровнять по центру текст. Так же вам могут понадобиться вот эти материалы:«Как выровнять текст или блок по вертикали в CSS?»«Выравнивание картинки по центру HTML и CSS»

С уважением Юлия Гусарь

Параметры white-space и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег «pre», помещенный в него текст отображается как есть, со всеми пробелами.

Свойство white-space имеет следующий синтаксис:

Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.

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

Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега «br» позволит перенести текст на новую строку.

Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.

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

Пример использования:

Далее рассмотрим параметр word-wrap, который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:

word-wrap: normal|break-word

Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:

Выравнивание по горизонтальному центру строчных (inline) и строчно-блочных (inline-block) элементов

Как известно, у нас есть простые способы центрировать контент по горизонтали. Для этого мы используем для абзаца, div-а, заголовка, т.е. любого блочного элемента, внутри которого размещен текст или картинка, — и все работает. Например, код для изображения ниже будет таким:

Изображение внутри абзаца с text-align:center

1
2
3

<pstyle=»text-align: center»>

<p>

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

Использование flexbox для горизонтального и вертикального центрирования элементов

Способ 1. Сочетание свойств и

Свойства Flexbox-модели позволяют выровнять элемент не только по горизонтали, но и по вертикали. Для этого нужно использовать всего 3 свойства для родительского элемента: , и . Для того чтобы было видно, как сработало последнее свойство, необходимо также добавить высоту родительскоиу элементу (в примере — ). Если у вас внутрь flex-контейнера вложен не один, а несколько элементов, то для того, чтобы они расположились друг под другом, нужно еще добавить свойство .

Использование свойств Flexbox-модели для горизонтального и вертикального центрирования элемента

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<style>

.test-flex{

height320px;

displayflex;

justify-contentcenter;

align-itemscenter

}

figure {border2pxdotted#a9a9a9;}

figcaption {

text-aligncenter;

font-weightbold;

margin-bottom10px;

}

</style>

<figcaption>3DCube<figcaption>

<div>

Пример вживую:

3D Cube

Способ 1а: display: inline-flex для небольших элементов

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

See the Pen inline-flex centering by Elen (@ambassador) on CodePen.dark

Способ 2: используем display: flex для родителя и margin: auto для дочернего элемента

Очень простой способ, который предполагает наличие одного дочернего элемента внутри flex-контейнера. CSS-стили лаконичны:

Один дочерний flex-элемент с margin: auto внутри flex-контейнера

CSS

.parent {
height: 400px;
display: flex;
}
.child{
margin: auto;
}

1
2
3
4
5
6
7

.parent {

height400px;

displayflex;

}

.child{

marginauto;

}

В примере ниже такой вариант применен для размещения текста по центру header-a для html-страницы.

See the Pen WNGKWNQ by Elen (@ambassador) on CodePen.dark

Вариант 3

Теперь будем выравнивать с помощью flex. Может показаться, что это идеальный способ выравнивания, потому что он действительно работает очень просто. Однако FLEX не справляется с задачей описанной в варианте 2. По крайней мере, у меня не получалось достигнуть тех же результатов.

К следующей секции:

Добавляем стили:

#cssmenu { margin: 20px auto; } #cssmenu ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } #cssmenu > ul > li { margin: 1px; }

Получаем:

В приведенном примере:

flex-wrap: wrap;

Перекидывает блоки на следующую строку, если они заполняют контейнер. Иначе они будут уходить дальше за окно браузера.

А этим:

justify-content: center;

Мы выравниваем содержимое блоков по центру.

Отступы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-indent</title>
  <style>
   #a { text-indent: 53px;    }
#b { text-indent: -43px;    }
div {
background: #FFDAB9;
width:35%;
font-size:29px;
margin-left: 30%;
padding-left:50px;
}
  </style> 
 </head> 
 <body>
<div>
   <p id="a">Для создания красной строки нужно знать всего лишь один параметр.</p>
   <p id="b">Им является простое свойство text-indent.</p>
</div>
 </body>
</html>

Хвалю тех, кто опробовал каждый пример на практике. Отправляйте ссылки на мой блог друзьям и не забывайте подписываться. Удачи! Пока-пока!

Прочитано: 1603 раз

Адаптивное центрирование по вертикали

Fluid vertical center

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

Главный приём здесь — создать невидимый элемент (используя псевдоэлемент), который будет заполнять контейнер по высоте, и установить свойства display: inline-block и vertical-align:middle. После этого нужно выровнять внутренний блок, также установив ему свойства display: inline-block и vertical-align: center. Затем центрировать блок по горизонтали, используя text-align: center:

.container {
  height: 400px;
  margin: 20px;
  background: #444;
  font-size: 0;
  text-align: center;
}

.container:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 50%;
  padding: 2em;
  border: 1px solid #000;
  background: #cc3f85;
  font-size: 1rem;
  vertical-align: middle;
}

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

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

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

МКМихаил Кузнецовавтор-переводчик статьи «Vertical-Alignment in CSS»

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions