Как выровнять блок (div) по центру — все популярные способы выравнивания

🗓️ Обновлено: 18.08.2021
💬Комментариев: 0
👁️Просмотров: 180
web

Подробное руководство по центрированию элементов на странице.

В этой статье рассмотрим, как отцентрировать блок по горизонтальной и вертикальной оси.

Горизонтальное центрирование

Первый способ

Первый вариант самый просто — просто добавьте вашему блоку свойство text-align: center;

.myblock {
  text-align: center;
}
Элемент по центру
Выравнивание по центру с помощью text-align: center;

⚠️ Недостаток этого метода в том, что теперь весь контент внутри этого блока будет центрироваться по центру:

Центрирование текста css
Весь текст в блоке теперь по центру

Таким образом данный способ подойдет для конкретной строки (например для h2,h3 и тд). Но для центрирования блока это плохой вариант.

Второй способ

Тоже достаточно простой способ. Используем display: flex;

К примеру, хотим выровнять один блок (заголовок h1):

<div class="container">
  <div class="myblock">
    <h1>Заголовок</h1>
  </div>  
</div>
.myblock {
  background: white;
  display: flex;
  justify-content: center;
}
Блок по центру с помощью flex
Центрирование с помощью flex

⚠️ Важно, если вы хотите добавить несколько блоков внутри элемента с классом .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 не центрирован.

Как разместить картинку по центру блока, вы можете узнать в этой статье.

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

Здесь все немного интереснее, но все так же при этом просто и понятно.

Первый способ

Горизонтальное и вертикальное центрирование

Статья была полезной?
👍
Да - 0
👎
Нет - 0
💬 Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Вступай в клуб
🧑‍💻Присоединяйся к сообществу!
Patreon
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
Где учиться
🧑‍🎓Рекомендуемые курсы
Javascript-разработчик
Введение в программирование
SEO-специалист
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Цвет 2022 года
Институт цвета Pantone объявил цвет 2022 года. Это сиреневый оттенок под названием 17-3938 Very Peri.
#6667ab