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

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



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

Что бы выровнять блок по горизонтали, достаточно прописать стиль 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.

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

Загрузка

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



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


Сервисы




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

14.Ноя.2019 Не выгружаются заказы в 1С
Не выгружаться заказы в 1С из сайта на битрисе могут по разн...

07.Ноя.2019 Видео youtube на фон сайта
Как-то на сайт мне нужно было вывести видео на весь экран, к...

05.Ноя.2019 Свойство с большим списком (датой)
Если в инфоблоке необходимо использовать свойство типа списо...

05.Ноя.2019 Основные настройки BitrixVM
Приведу основные пути и файлы конфигурации в виртуальной маш...

24.Окт.2019 Безлимитный интернет от Билайн не безлимитный
Как-то мне пришла смс от Билайна, что мне доступна услуга бе...

24.Окт.2019 Как мне помог сервис kwork.ru
Хочу поделиться своей истории о том, как я начал зарабатыват...

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

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

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

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