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

В 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; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

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

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

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

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

1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:

Block { margin-left: auto; margin-right: auto; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:

Parent { text-align: center; } .child { display: inline-block; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

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

1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

Parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

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

Parent { display: table; } .child { display: table-cell; vertical-align: middle; }

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

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

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

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

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

Первый метод с line-height

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

CSS

Constutesim_first {
border: 2px solid #bf1515;
height: 175px;
}
.constutesim_first > p{
line-height:175px;
margin:0;
text-align:center;
padding: 0;
font-size: 17px;
color: #3152a0;
font-family: Tahoma;
font-weight: bold;
}

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

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

CSS

Second-variation{
border: 2px solid red;
line-height:158px;
}

Second-variation div{
text-align:center;
}
.second-variation img {
vertical-align: middle;
border: 0px solid #3a3838;
}

Реализуем снимки изображений по центру и вертикали.

Выравнивание со свойством position

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

CSS

Competaird-option {
border: 2px solid #d40e0e;
height: 162px;
position: relative;
}
.competaird-option div {
position: absolute;
top: 50%;
left: 50%;
height: 28%;
width: 49%;
margin: -2% 0 0 -25%;
border: 2px solid #4a4848;
}

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

Выравнивание со свойством table

В этом методе задействуем проверенную и старую методу, где переделаем элементы в таблицу в которой находятся ячейки. Что по тегу, под названием table, то здесь он не будет задействован, здесь будем задавать совершенно другие свойство CSS, это display: table;, display: table-cell;. Если говорить про самые старые версий IE, то данные здесь просто выводить не будет. Надеюсь вы свой браузер обновили, так как он становится не актуален и почти все не корректно выводит.

Cherevert-variation {
border: 2px solid #c30b0b;
height: 173px;
display: table;
width: 100%;
font-size: 17px;
font-weight: bold;
color: #3945a0;
}

Cherevert-variation div{
display: table-cell;
vertical-align: middle;
text-align:center;
}

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

Выравнивание со свойством flex

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

CSS

Variant-horizontal {
border: 2px solid #d20c0c;
height: 147px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: #49518c;
}

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

Выравнивание со свойством transform

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

CSS

Vertical-medilpasudsa {
border: 2px solid #e00a0a;
height: 158px;
font-size: 19px;
font-weight: bold;
color: #353c71;
}
.vertical-medilpasudsa > div{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
}

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

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

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

Text-align имеет несколько допустимых свойств:

Center: Текстура центрирована;
left: Будет выравниваться с левой стороны контейнера;
right: Выровнен с правой стороны контейнера
justify: Вынужден ровняться, как с левой, так и с правого края контейнера, за исключением крайних строк;
justify-all: Заставляет крайнее строку оправдывать знаки;
start: То же самое, что по левую, только если направление идет с лева на правую сторону. Но правильно будет, если изначально задать направление текстового направление, что произойдет справа налево;
End: Противоположность начала;
match-parent: Аналогично наследованию, кроме начала и конца, вычисляется относительно родительского элемента;

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

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

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

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка 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/fk5nqh52/3 .

Вариант 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. Он не требует лишних телодвижений, достаточно понятно описывает суть происходящего, обладает высокой гибкостью. Единственное, что стоит помнить при выборе данного способа - поддержка IE от 10-й версии включительно. caniuse.com/#feat=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; } }

Вариант 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; } .block { display: inline-block; img { display: block;; border: none; } }

Бонус

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

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

Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.

Синтаксис CSS vertical-align

... vertical-align : value ; ...

• baseline - выравнивание по базовой линии предка (или просто нижняя граница родителя)
• bottom - выравнивание по нижней части строки (или элемента, который располагается ниже всех)
• middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
• sub - отображение происходит под строкой (выглядит как подстрочный индекс)
• super - отображение происходит над строкой (как верхний индекс)
• text-bottom - выравнивание нижней границы элемента по нижнему краю строки
• text-top - выравнивание верхняя границы элемента по верхнему краю строки
• top - выравнивание верхняя края элемента по верху самого высокого элемента строки
• inherit - наследует значение родителя
• значение - указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
• проценты - указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз

Значение vertical-align по умолчанию:

• baseline (для строчных элементов)
• middle (для ячеек таблицы)

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

Чаще всего vertical-align используется в ячейках таблиц. В теге

используют атрибут valign .

Синтаксис CSS valign для таблиц

Где value может принимать следующие значения:

• baseline - выравнивание по базовой линии первой текстовой строки
• bottom - выравнивание по нижнему краю ячейки таблицы
• middle - выравнивание по середине ячейки
• top - выравнивание верхнему краю ячейки

Например:

или

Выравнивание по верху

Выравнивание по середине

Выравнивание по низу

Выравнивание по верху

Выравнивание по середине

Выравнивание по низу

Примеры с вертикальными выравниваниями

Пример 1. Значения vertical-align: baseline, bottom, top, sub

Текст с выравниванием vert_align_baseline
Текст с выравниванием vert_align_bottom
Текст с выравниванием vert_align_top
Текст с выравниванием vert_align_sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

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

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

Примечание

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

object.style.verticalAlign ="VALUE "

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

Но не бойтесь: если вы уже боретесь с CSS вертикальным выравниванием - вы обратились по адресу.

Поговорим о свойстве CSS vertical align

Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align ”. Ах, если бы все было так просто…

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

Посмотрите пример

Мы хотим центрировать контент, а не сам div!

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

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

Взгляните на этот пример

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

Чтобы это работало, должен быть родительский контейнер с display: table , а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle .

Посмотрите пример

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

Свойство position

Начнем с основ выравнивания по вертикали CSS div :

• position: static - это значение по умолчанию. Элемент отображается в соответствии с порядком HTML ;
• position: absolute - используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static ). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
• position: relative - используется для позиционирования элемента относительно его нормального положения (статического ). Это значение сохраняет порядок потока документа;
• position: fixed - используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

Примечание: некоторые свойства (top и z-index ) работают только в том случае, если для элемента задано значение position (не static ).

Давайте приступим к делу!

Вы хотите осуществить CSS выравнивание по центру по вертикали ? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

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

• Старое свойство : нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите пример ;
• Новое свойство CSS3 : можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотреть пример .

В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px . Это прекрасно работает на тестовых экранах, но это не центровка.

Помните position: fixed ? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента - она всегда будет позиционировать относительно окна браузера.

Вы слышали о спецификации flexbox?

Можно использовать flexbox . Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали . С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

Посмотреть пример

Используя flexbox расположение, можно центрировать несколько блоков.

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

Ссылки и дополнительная литература

Изучение CSS разметки

FlexBox Froggy

Песочница flexbox

Перевод статьи “CSS Vertical Align for Everyone (Dummies Included) ” был подготовлен дружной командой проекта .