Центрирование в CSS традиционно является причиной разочарований. Это повседневная задача, но существует так много возможных решений! Подход, который вы используете, будет отличаться в зависимости от того, как вы центрируете — по горизонтали, по вертикали или по обоим направлениям!
В этом руководстве мы рассмотрим, какие методы лучше всего подходят для каждого сценария.
Горизонтальное центрирование
Строчные элементы
Строчные элементы, такие как текст (и ссылки), очень просто центрировать по горизонтали с помощью свойства text-align
:
p {
text-align: center;
}
Это работает для inline, inline-block, inline-flex, inline-table и т.д.
Блочные элементы
Элемент блочного уровня может быть отцентрирован, если оба его свойства margin-left
и margin-right
установлены в auto
(при условии, что элемент имеет width
). Часто это делается с помощью сокращения margin
:
.element {
margin: 0 auto;
}
Однако современный способ центрирования элементов уровня блока (всего, что не является текстом) — это использование Flexbox!
Предположим, что у нас есть HTML следующего вида:
<div class="container">
<div>.element</div>
</div>
Добавьте следующий CSS:
.container {
display: flex;
justify-content: center;
}
Это горизонтально центрирует любой элемент внутри элемента .container
.
Вертикальное центрирование
Вертикальное центрирование традиционно было довольно сложным. И чаще всего оно осуществляется с помощью кода, подобного этому:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Это действительно работает, поскольку перемещает дочерний элемент назад на половину расстояния от его высоты. И позиционирует середину дочернего элемента на середине его родителя.
Однако мы можем сделать это гораздо проще с помощью Flexbox:
.container {
display: flex;
align-items: center;
}
Это позволит вертикально центрировать любой элемент внутри элемента .container
.
Центрирование по вертикали и горизонтали
Для центрирования по вертикали и горизонтали мы просто комбинируем эти техники!
Чтобы идеально отцентрировать элемент в центре его контейнера:
.container {
display: flex;
justify-content: center;
align-items: center;
}
При использовании CSS Grid мы также можем легко сделать это:
.container {
display: grid;
place-items: center;
}
В CSS можно выровнять по центру все, что угодно!
Как только вы узнаете основы Flexbox и Grid, вы увидите, насколько это просто!
Заключение
Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой! Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь
🌎 Давайте общаться
-
Портфолио
-
Twitter
-
LinkedIn
-
Hashnode
-
Devto
-
Medium
-
Github
-
Codepen