Как выровнять блок по центру экрана | Сайты для бизнеса

Как выровнять блок по центру экрана



Задача выровнять блок по центру дисплея.

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


Как это работает?
Допустим у нас есть DIV или H1:

  1. <h1 class="heading">Заголовок по центру</h1>

Если нам нужно просто отцентрировать его по центру используем следующий стиль:

  1. .heading {
  2. text-align: center;
  3. }

Но если нужно по середине всего экрана, то тогда нам нужно обернуть это все дело в контейнер DIV:

  1. <div class="block">
  2. <h1 class="heading">Название лендинга</h1>
  3. </div>

с использованием стилей для контейнера блок:

  1. .block{
  2. height: 100vh;
  3. display: flex;
  4. justify-content: center;
  5. align-items: center;
  6. }

Задаем нашему блоку высоту 100vh, установить значение display равному flex, а также зададим свойствам justify-content и align-items равному center.

Теперь наш заголовок расположиться ровно по центру экрана, как по горизонтали, так и по вертикали.

Загрузка

71 просмотр
07.06.2018
Теги: css



Комментариев пока нет
Оставить комментарий
 
Текст сообщения*
Защита от автоматических сообщений
 


Сервисы




Последние публикации

04.Май.2019 Вывод ошибок в .settings.php
Если у вас на сайте произошла ошибка, но она не отображается...

05.Дек.2018 403 Forbidden в админке Bitrix

15.Июн.2018 Пагинация REL PREV NEXT 1С-Битрикс
Что бы облегчить поисковикам работу можно указать в теге hea...

07.Июн.2018 Как выровнять блок по центру экрана
Что бы выровнять блок по горизонтали, достаточно прописать с...

07.Июн.2018 Билайн продолжает списывать деньги при минусе
Это продолжение предыдущей статьи.
В прошлый раз я пис...

30.Май.2018 Новая версия 1С-Битрикс 18
Вышла новая версия 1С-Битрикс: Управление сайтом версии 18.0...

22.Май.2018 Настройка ЧПУ в 1С-Битрикс
Самый главный файл в 1С-Битрикс для настройки ЧПУ это urlrew...

22.Май.2018 Форматирования BB кода в 1С-Битрикс
Часто возникает ситуация, когда надо отформатировать текст, ...

21.Дек.2017 Не работает init.php
Если вы вносите правки в системный файл Битрикс init.php и н...

06.Июн.2017 Не выводятся деньги с QIWI на карту Сбербанка
При выводе средств из кашелька КИВИ (Visa QIWI Wallet...