Вёрстка: блоки по центру | CSS
Сейчас рассмотрен частный случай: при уменьшении размера экрана блоки равномерно смещаются вниз.
1 2 3 4 5 6
1 2 3 4 5 6
Пример: месяца в календаре «Как рассчитать сколько осталось до Дня Рождения» выравнены подобным образом, только вместо
#raz span
использовано
#raz table
Отступы от края родителя до блоков можно регулировать.
1 2 3 4 5 6
1 2 3 4 5 6
14 комментариев:
seoonly.ru Спасибо! Aleksandr P Может подскажите как в bloggere разместить заглавие поста по центру? NMitra Недоблогер? В CSS добавьте:
#Header1_headerimg Aleksandr P ок спасибо! Aleksandr P Ого не все так просто, можно чайнику поподробнее? NMitra Посмотрите тут http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css Aleksandr P Посмотрел к сожалению у меня отсутствует фрагмент «]]>. » NMitra Тогда перед
Aleksandr P И так? у меня при добавлении в CSS кода, ( в дизайнере шаблонов) получилось шапку фона сместить по центру. Это тоже супер, давно хотел. Но Вот заголовок сообщения не получается.Нигде стиль не прописан ищу через Ctrl+F NMitra h3.post-title text-align: center;
> Aleksandr P Супер. Спасибо большое. Ульяна Михайлова Здравствуйте! Скажите, пожалуйста, а к li такой способ можно применять? NMitra Здравствуйте, можно, только закрывать li нужно
и если необходимо сбросить стили
Блок по центру экрана
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%); >Как выровнять блок (div) по центру — все популярные способы выравнивания
Подробное руководство по центрированию элементов на странице.
В этой статье рассмотрим, как отцентрировать блок по горизонтальной и вертикальной оси.
Горизонтальное центрирование
Первый способ
Первый вариант самый просто — просто добавьте вашему блоку свойство text-align: center;
.myblock
⚠️ Недостаток этого метода в том, что теперь весь контент внутри этого блока будет центрироваться по центру:
Таким образом данный способ подойдет для конкретной строки (например для h2,h3 и тд). Но для центрирования блока это плохой вариант.
Второй способ
Тоже достаточно простой способ. Используем display: flex;
К примеру, хотим выровнять один блок (заголовок h1):
Заголовок
.myblock
⚠️ Важно, если вы хотите добавить несколько блоков внутри элемента с классом .myblock, то нужно немного изменить css.
Заголовок
Небольшой текстЗдесь мы добавили блок с классом width-1-2, чтобы продемонстрировать, как работает центрирование для блоков с заданной шириной.
.myblock < display: flex; flex-direction: column; align-items: center; justify-content: center; >.width-1-2
Нам пришлось добавить в css свойство flex-direction: column, чтобы сменить основную ось (была горизонтальная, стала вертикальная) и разместить блоки друг над другом. И раз мы сменили ось, то теперь нам нужно использовать align-items:center, чтобы разместить блок по центру.
Как видите, блоки размещены по центру, при этом, в отличие от text-align: center; текст внутри div не центрирован.
Как разместить картинку по центру блока, вы можете узнать в этой статье.
Вертикальное центрирование
Здесь все немного интереснее, но все так же при этом просто и понятно.
5 способов горизонтального выравнивание блоков по центру
Почему горизонтальное выравнивание блоков по центру — тема актуальная для начинающих верстальщиков? Связано это с левосторонним позиционированием элементов на HTML странице по умолчанию. Давайте рассмотрим на наглядном примере. У нас есть блок-родитель с черной рамкой, внутри которого расположен фиолетовый блок-ребенок.
// CSS код родительского блока
.wrap max-width: 400px;
margin: 50px auto;
border: 3px solid black;
min-height: 100px;
>// CSS код дочернего блока
.block width: 100px;
height: 100px;
margin: 5px;
background: blueviolet;
>Мы видим, что дочерний блок прижат к левому краю родительского блока. Такое поведение элементов является дефолтным. В реальных дизайнерских макетах для верстки, большинство элементов выровнены по центру относительно браузера и других элементов. Поэтому с необходимостью постоянно что-то выравнивать, начинающий верстальщик столкнется практически сразу.
Я знаю по меньшей мере 5 способов горизонтального выравнивания блоков по центру.
1) Свойство text-align (используется, но реже)
Добавим класс center со свойством text-align: center к родительскому блоку и отобразим дочерний блок, как inline-block.
.center text-align: center;
>.block .
display: inline-block;
>
2) Свойство margin: auto (актуальное)
Данное свойство мы прописываем дочернему блоку. В сокращенной записи верхнему и нижнему отступу мы можем оставить нулевое значение или указать нужные размеры согласно макету для верстки. Но нас интересует значение auto, как раз оно и задает автоматический отступ с левой и с правой стороны от вложенного блока. Это значит, что пространство с обеих сторон должно рассчитываться поровну. Этот способ выравнивания и по сей день является самым популярным у верстальщиков при горизонтальном выравнивании.
3) Свойство position: absolute (устаревшее)
Когда к дочернему блоку применяется position: absolute, то оно перестает влиять на родителя. Поэтому для родителя мы задаем position: relative, чтобы позиционироваться от него. А ребенку задается position: absolute, смещаем его на 50% влево и задаем отступ на половину его ширины. Не рекомендую использовать этот способ, так как он противоречит принципу независимого переиспользования блоков.
.relative position: relative;
>.absolute position: absolute;
left: 50%;
transform: translate (-50%, 0); /* альтернатива margin-left: -50px; */
>4) Свойство flexbox (популярное)
Flexbox — самый простой и современный способ горизонтального выравнивания по центру. Для родителя добавляются два флексовых свойства.
5) Свойство grid (современное)
Еще один современный способ выравнивания — это grid. Добавляем родителю всего два grid свойства, а вложенному блоку — три grid свойства.
.grid-parent display: grid;
grid-template-areas: «a»;
>.grid-child grid-area: a;
justify-self: center;
>
Создано 04.11.2020 10:53:02
- Михаил Русаков
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 1 ):
romas_s 04.11.2020 18:14:39
Добрый день, бы ло бы интересно почитать статью как выровнять блоки по высоте.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.