Как центрировать элементы CSS с помощью Flexbox
Development | Комментировать запись
Как известно, раньше в CSS центрирование элементов на странице, – а особенно центрирование по вертикали, – было сложной задачей, требующей применения разных хаков и уловок. К счастью, Flexbox все упростил, и теперь разработчики могут сосредоточить свою энергию на проблемах более высокого уровня.
Это очень простое руководство расскажет вам, как центрировать элементы с помощью Flexbox.
Горизонтальное центрирование
Давайте начнем с элемента div, который содержит два абзаца. Допустим, их нужно центрировать по горизонтали на одной оси. Для этого достаточно использовать свойство justify-content со значением center:
<div class="box flex"> <p> <img src="/images/pirate.svg" width="75"> arrr! </p> <p> <img src="/images/cowboy.svg" width="75"> yeehaw! </p> </div>
Разметка выглядит так:
.box.flex { display: flex; justify-content: center; } .box { padding: .5rem; height: 300px; box-shadow: 2px 2px 5px rgba(0,0,0,0.03); border-radius: 4px; color: #84613D; font-family: "Lucida Console", Monaco, monospace; background: #FDF9EA; border-bottom: 1px solid #F9F2D6; border-right: 1px solid #F9F2D6; } .box p { max-width: 125px; text-align: center; background: rgba(255,255,255,0.5); margin: .25rem; padding: .25rem; }
Вертикальное центрирование
Преимущества Flexbox особенно заметны тогда, когда вам необходимо центрировать элементы по вертикали. Взглянем на тот же пример, но в этот раз элементы будут отцентрованы по вертикали:
.box.flex { display: flex; justify-content: center; align-items: center; }
Если вы просто хотите, чтобы по вертикали были центрированы определенные flex элементы, вы можете установить свойство align-self:
.flex p:last-child { align-self: center; }
Вертикальное центрирование относительно всей страницы
Поместить элемент четко по центру страницы немного сложнее, потому что flex-элементы будут центрироваться только по вертикали в соответствии с высотой их контейнера. Следовательно, сам контейнер должен быть той же высоты, что и вся страница, чтобы это работало. Это достаточно легко сделать, используя единицы измерения области просмотра, где 100vh — это 100% высоты области.
Давайте посмотрим на простой пример:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dead center!</title> <style> body { margin: 0; } .center-me { display: flex; justify-content: center; align-items: center; height: 100vh; } </style> </head> <body> <div class="center-me"> <p> Bonjour center!</p> </div> </body> </html>
Примечание: Обратите также внимание, что поле страницы нужно обязательно сбрасывать до 0, иначе на странице получится небольшая прокрутка.
Читайте также: Единицы измерения CSS: rem vs em
Tags: CSS, Flexbox