Центрирование в CSS традиционно было причиной разочарования. Это повседневная задача, но существует множество возможных решений! Подход, который вы выберете, будет отличаться в зависимости от того, центрируете ли вы по горизонтали, по вертикали или по обоим направлениям!
В этом руководстве мы рассмотрим, какие методы лучше всего подходят для каждого сценария.
🤓 Хотите быть в курсе новостей веб-разработчиков?
🚀 Хотите, чтобы последние новости доставлялись прямо на ваш почтовый ящик?
🎉 Присоединяйтесь к растущему сообществу дизайнеров и разработчиков!
Подпишитесь на мою рассылку здесь → https://easeout.eo.page
Горизонтальное центрирование
Встроенные элементы
Встроенные элементы, такие как текст (и ссылки), очень просто центрировать по горизонтали с помощью свойства 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, вы увидите, насколько это просто! 👍
Готовы ли вы поднять свои навыки CSS на новый уровень? Начните прямо сейчас с моей новой электронной книги: Руководство по CSS: Полное руководство по современному CSS. Будьте в курсе всего, от основных концепций, таких как Flexbox и Grid, до более сложных тем, таких как анимация, архитектура и многое другое !!
Спасибо за чтение! 🎉🎉🎉