Как выровнять блок (div) по центру — все популярные способы выравнивания
Подробное руководство по центрированию элементов на странице.
В этой статье рассмотрим, как отцентрировать блок по горизонтальной и вертикальной оси.
Горизонтальное центрирование
Первый способ
Первый вариант самый просто — просто добавьте вашему блоку свойство text-align: center;
.myblock {
text-align: center;
}
⚠️ Недостаток этого метода в том, что теперь весь контент внутри этого блока будет центрироваться по центру:
Таким образом данный способ подойдет для конкретной строки (например для h2,h3 и тд). Но для центрирования блока это плохой вариант.
Второй способ
Тоже достаточно простой способ. Используем display: flex;
К примеру, хотим выровнять один блок (заголовок h1):
<div class="container">
<div class="myblock">
<h1>Заголовок</h1>
</div>
</div>.myblock {
background: white;
display: flex;
justify-content: center;
}
⚠️ Важно, если вы хотите добавить несколько блоков внутри элемента с классом .myblock, то нужно немного изменить css.
<div class="myblock">
<h1>Заголовок</h1>
<div class="width-1-2">
Небольшой текст
</div>
</div> Здесь мы добавили блок с классом width-1-2, чтобы продемонстрировать, как работает центрирование для блоков с заданной шириной.
.myblock {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.width-1-2 {
width: 50%;
background: lightblue;
}Нам пришлось добавить в css свойство flex-direction: column, чтобы сменить основную ось (была горизонтальная, стала вертикальная) и разместить блоки друг над другом. И раз мы сменили ось, то теперь нам нужно использовать align-items:center, чтобы разместить блок по центру.
Как видите, блоки размещены по центру, при этом, в отличие от text-align: center; текст внутри div не центрирован.
Как разместить картинку по центру блока, вы можете узнать в этой статье.
Вертикальное центрирование
Здесь все немного интереснее, но все так же при этом просто и понятно.
Первый способ