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

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



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

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

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

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



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

Билайн продолжает списывать деньги при минусе
Пагинация REL PREV NEXT 1С-Битрикс
Статьи


Сервисы

Найти среднюю оценку

Прибавить или вычесть процент

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

Калькулятор соотношения сторон пропорции ширины и высоты

Калькулятор стоимости кафеля (плитки)

Калькулятор стоимости длины

Калькулятор цен по весу

Калькулятор сравнения (разницы) цен

Калькулятор стоимости товара

Тетрис на Двоих

Проверка домена (whois)




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

24.окт.2021 Битрикс Работа с сокетами Ошибка! Не работает
В проверке сайте можно наблюдать такую ошибку
Работа ...

17.июл.2021 Как передать Roistat в заказ 1С-Битрикс
Передать ID Roistat можно в сам заказ в Битриксе после его о...

21.июн.2021 Сбой на файле, ошибка распаковки пакета
При очередном обновлении 1С-Битрикс выскочила ошибка [UUGZA0...

03.июн.2020 Не выводиться заглушка в композитном кеше
Столкнулся с тем, что при указании заглушки в динамической о...

01.апр.2020 Установка SSL сертификата LetsEncrypt на BitrixVM
Установка SSL сертификата LetsEncrypt на виртуальную машину ...

07.мар.2020 Битрикс настройка SSL, ошибка работы с сокетами
Заходим в меню битрикса выбираем 8. Manage pool web servers ...

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

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

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

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