Центрирование в CSS с помощью Flexbox
Центрирование элементов на странице, особенно вертикальное центрирование, в прошлом было сложно сделать с CSS, и нам приходилось делать ряд хаков. К счастью, Flexbox все упрощает, и теперь мы можем сосредоточить нашу энергию проектирования на проблемах более высокого уровня.
Ниже приведено очень простое руководство по центрированию элементов с использованием Flexbox.
Горизонтальное центрирование
Начнем с div, который содержит два абзаца, которые мы хотим центрировать по горизонтали на одной оси. Это так же просто, как использование свойства justify-content со значением центра на контейнере:
<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;
}
Вертикальное центрирование на всей странице
Если вы хотите поместить элемент по центру страницы, это может быть немного сложнее, потому что элементы не имеющие высоты и ширины будут располагаться только по вертикали в соответствии с высотой их контейнера. Это означает, что сам контейнер должен быть такой же высоты, как и сама страница. Это достаточно просто сделать, используя 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>
