Осваиваем CSS: выравнивание по центру
Использование CSS является наиболее оптимальным способом центрирования изображений, блоков текста и даже всего дизайна веб-страницы. Большинство свойств для HTML align стали доступны в CSS , начиная с версии 1.0 . Они отлично работают с CSS3 и современными веб-браузерами:
Применение CSS — выравнивание по центру HTML
Центрирование с помощью CSS может стать проблемой для начинающих веб-дизайнеров. Существует много способов сделать это, но не все они применимы к каждому элементу.
CSS можно использовать, чтобы:
- Центрировать текст;
- Центрировать блочный элемент ( например, div );
- Центрировать изображение;
- Вертикально центрировать блок или изображение.
Много лет назад веб-дизайнеры могли использовать для центрирования изображений и текста. Но теперь этот тег признан устаревшим и больше не поддерживается современными браузерами. Это вызвано тем, что современные сайты должны иметь четкое разделение структуры и стилей.
Советы по центрированию с помощью CSS
HTML используется для создания структуры, а CSS определяет стили. Так как центрирование – это визуальная характеристика, то оно осуществляется с помощью каскадных стилей.
Выравнивание текста по центру CSS
Не знаете как выровнять текст по центру CSS? Проще всего центрировать текст на веб-странице. Чтобы это сделать, нужно всего одно свойство: HTML text align :
p.center
С помощью этой строки кода каждый параграф с классом center будет центрирован горизонтально внутри своего родительского элемента.
Применения этого класса:
This text is centered.
При выравнивании текста по центру при помощи свойства text-align помните, что он будет центрирован внутри содержащего его контейнера, и необязательно относительно всей страницы.
Выровнять по центру CSS блоки контента
Блоками являются любые элементы на странице, которые устанавливаются как элементы уровня блока и имеют определенную ширину. Часто такие блоки создаются с помощью .
Наиболее распространенный способ центрирования блоков – это задать для левого и правого отступов значение auto :
div.center
Это сокращенная форма свойства margin установит для верхнего и нижнего отступа значение 0 , а левый и правый отступы будут использовать значение auto . Таким образом занимается все доступное место и делится равномерно между двумя сторонами, что равносильно HTML div align .
Применение в HTML:
This entire block is centered, but the text inside it is left aligned.
Поскольку блок имеет определенную ширину, он будет центрирован внутри содержащего его элемента. Текст, находящийся в этом блоке, будет выровнен не по центру, а по левому краю. Так как по умолчанию в браузерах текст выравнивается по левому краю. Чтобы выровнять по центру текст, используйте свойство text-align , которое мы описывали ранее.
Как выровнять картинку по центру в HTML
Большинство браузеров отобразят изображения по центру при использовании свойства HTML text align . Но не стоит полагаться на этот метод, так как он не рекомендован W3C .
Но как выровнять картинку по центру CSS? Для этого следует явно указать браузеру, что изображение является элементом уровня блока. Вот код CSS для этого:
img.center
Вот HTML код для изображения, которое нужно центрировать:
Также можно центрировать объекты с помощью встроенного CSS :
Вертикальное центрирование элементов
HTML vertical align всегда было проблематичным в веб-дизайне, но с выходом спецификации CSS Flexible Box Layout Module в CSS3 , появилось решение для этой задачи.
Вертикальное выравнивание работает также как и горизонтальное, описанное выше. Свойство vertical-align со значением middle :
.vcenter
Недостатком этого подхода является то, что не все браузеры поддерживают CSS FlexBox . Если есть проблемы с более ранними версиями браузеров, W3C рекомендует центрировать текст вертикально в контейнере, используя следующий метод:
- Поместите элементы, которые нужно центрировать, внутрь элемента-контейнера, такого как div ;
- Задайте минимальную высоту элементу-контейнеру;
- Объявите элемент-контейнер;
- Установите для HTML vertical align значение middle .
.vcenter
This text is vertically centered in the box.
Вертикальное центрирование и ранние версии Internet Explorer
Существует несколько способов заставить IE центрировать объекты, а затем воспользоваться условными комментариями. Хорошая новость заключается в том, что в связи с недавним решением Microsoft отказаться от поддержки старых версий IE эти браузеры должны скоро исчезнуть, тем самым облегчив для веб-дизайнеров использование таких современных подходов к разметке как CSS FlexBox .
МЛ Мария Логутенко автор-переводчик статьи « Use CSS to Center Images and Other HTML Objects »
Блок по центру экрана
6 способов выровнять блок по центру по вертикали и горизонтали.
Время чтения: 5 мин
Открыть/закрыть навигацию по статье
- Задача
- Готовое решение
- Разбор решения
- Гриды
- Флексбокс. Первый способ
- Флексбокс. Второй способ
- Отступ и трансформация
- Абсолютное позиционирование с известной высотой
- Абсолютное позиционирование без известной высоты
Задача
Скопировать ссылку «Задача» Скопировано
Перед вами встала задача выровнять блок по центру экрана по вертикали и горизонтали. Предположим, это будет всплывающее окно. В этом рецепте разберём все существующие на данный момент способы решения задачи.
Готовое решение
Скопировать ссылку «Готовое решение» Скопировано
Ниже перечислены все возможные способы центрирования элемента. Выберите один из них.
Центрируем при помощи гридов:
.parent display: grid; place-items: center;>.parent display: grid; place-items: center; >Центрируем при помощи флексбокса, способ первый:
.parent display: flex; justify-content: center; align-items: center;>.parent display: flex; justify-content: center; align-items: center; >Центрируем при помощи флексбокса, способ второй:
.parent display: flex;> .child margin: auto;>.parent display: flex; > .child margin: auto; >.child margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%);>.child margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%); >Абсолютное позиционирование, когда известна высота:
.child height: 200px; margin-inline: auto; inset-inline: 0; /* Отступ сверху 50% минус половина высоты */ inset-block-start: calc(50% - 100px);>.child height: 200px; margin-inline: auto; inset-inline: 0; /* Отступ сверху 50% минус половина высоты */ inset-block-start: calc(50% - 100px); >Абсолютное позиционирование, когда высота неизвестна:
.child margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%);>.child margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%); >Разбор решения
Скопировать ссылку «Разбор решения» Скопировано
Перед разбором каждого из решений разберёмся со стартовым кодом. Во всех примерах зададим 100% высоты окна браузера для и , чтобы страница растянулась по высоте.
Также во всех примерах по возможности используются логические свойства, чтобы код был современным.
В качестве блока, который будем центрировать, используем тег . Именно с его помощью сейчас принято создавать всплывающие окна.
Обратите внимание, что по умолчанию у этого элемента задано абсолютное позиционирование. Переопределим позиционирование на статичное, чтобы оно нам не мешало.
Привет, это Дока!
body class="parent"> dialog class="child" open> h1>Привет, это Дока!h1> dialog> body>html height: 100vh;> body min-height: 100%;> dialog position: static;>html height: 100vh; > body min-height: 100%; > dialog position: static; >Гриды
Скопировать ссылку «Гриды» Скопировано
Самый современный и изящный способ центрирования элемента — при помощи гридов.
Делаем родителя — в нашем случае .parent — грид-контейнером.
.parent display: grid;>.parent display: grid; >После этого можем использовать свойства грид-контейнера для выравнивания вложенных элементов по вертикальной и горизонтальной осям:
.parent display: grid; justify-items: center; align-items: center;>.parent display: grid; justify-items: center; align-items: center; >Или использовать шорткат для объединения двух свойств в одно:
.parent display: grid; place-items: center;>.parent display: grid; place-items: center; >Флексбокс. Первый способ
Скопировать ссылку «Флексбокс. Первый способ» Скопировано
Используем флексбокс для выравнивания по центру. Тут есть два способа. В первом случае будем задавать свойства родителю.
Делаем родителя флекс-контейнером:
.parent display: flex;>.parent display: flex; >Задаём свойства для выравнивания по центру вертикальной и горизонтальной осей:
.parent display: flex; justify-content: center; align-items: center;>.parent display: flex; justify-content: center; align-items: center; >Флексбокс. Второй способ
Скопировать ссылку «Флексбокс. Второй способ» Скопировано
Когда родитель является флекс-контейнером, ребёнку можно задать автоматические внешние отступы со всех сторон.
.parent display: flex;> .child margin: auto;>.parent display: flex; > .child margin: auto; >Отступ и трансформация
Скопировать ссылку «Отступ и трансформация» Скопировано
В этом способе используем комбинацию внешних отступов и трансформации. Для начала выровняем блок по горизонтальной оси автоматическими отступами, а от верхнего края отодвинем на 50%:
.child margin-inline: auto; margin-block-start: 50vh;>.child margin-inline: auto; margin-block-start: 50vh; >Верхний внешний отступ равен 50% высоты экрана, но это сдвигает элемент чуть ниже центра.
Чтобы расположить элемент ровно по центру, нужно использовать свойство transform с функцией translate Y ( ) в качестве значения.
.child margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%);>.child margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%); >При трансформации проценты вычисляются от фактического размера элемента, к которому эта трансформация применяется. Поэтому наш блок поднимается вверх ровно на половину своей высоты.
Абсолютное позиционирование с известной высотой
Скопировать ссылку «Абсолютное позиционирование с известной высотой» Скопировано
Вернём нашему диалогу абсолютное позиционирование и попробуем выровнять его в таком состоянии. Не забудем задать родителю position : relative , чтобы ребёнок позиционировался от краёв родителя.
Для начала разберём пример, когда у элемента задана фиксированная высота:
.parent position: relative;> .child position: absolute; height: 200px;>.parent position: relative; > .child position: absolute; height: 200px; >Сначала нужно задать элементу координаты отсчёта позиции. Пока зададим 0 со всех четырёх сторон. Используем логическое свойство inset .
.child position: absolute; height: 200px; inset: 0;>.child position: absolute; height: 200px; inset: 0; >На самом деле нам нужны нули только по горизонтали. Для выравнивания используем уже знакомый приём с автоматическими боковыми отступами.
По вертикали от верхнего края хотим оттолкнуть элемент на 50% минус половина высоты элемента. В нашем случае это 125 пикселей. Будем использовать функцию calc ( ) :
.child position: absolute; height: 250px; margin-inline: auto; inset-inline: 0; inset-block-start: calc(50% - 125px);>.child position: absolute; height: 250px; margin-inline: auto; inset-inline: 0; inset-block-start: calc(50% - 125px); >Абсолютное позиционирование без известной высоты
Скопировать ссылку «Абсолютное позиционирование без известной высоты» Скопировано
В этом варианте высота элемента не фиксирована. Значит, нам нечего вычитать из 50% для отступа от верхнего края. Используем transform , который вычисляет проценты от размера элемента.
.child position: absolute; margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%);>.child position: absolute; margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%); >