От автора: данная статья предлагает руководство ко всему, что вам нужно знать о центрировании в CSS.
Горизонтальное центрирование
1. Встроенные элементы
text-align
Для центрирования встроенного элемента, такого как ссылка, span или изображение, все, что вам нужно, это text-align: center.
1 2 3 |
<div class="desk"> <span class="plate"></span> </div> |
1 2 3 |
.desk { text-align: center; } |
Для нескольких встроенных элементов процесс аналогичен. Это возможно при использовании text-align: center.
1 2 3 4 |
<div class="desk"> <span class="plate"></span> <span class="plate"></span> </div> |
1 2 3 |
.desk { text-align: center; } |
Flexbox
Изменив display на flex гибкий, мы можем легко центрировать содержимое.
1 2 3 4 |
.desk { display: flex; justify-content: center; } |
Даже для нескольких встроенных элементов центрирование работает без проблем.
1 2 3 4 |
.desk { display: flex; justify-content: center; } |
CSS-сетка
С помощью сеточного контейнера тарелка будет центрирована в соответствии с ее областью сетки. Обратите внимание, что это не будет работать с более чем одной тарелкой, если они не будут обернуты в один элемент.
1 2 3 4 |
.desk { display: grid; justify-content: center; } |
2. Блочные элементы
Auto Margin
Элемент блока с известной шириной и высотой можно центрировать, используя значение auto для левого и правого полей.
1 2 3 4 5 6 |
.plate { width: 120px; height: 120px; margin-left: auto; margin-right: auto; } |
Auto Margin
Для нескольких блочных элементов их нужно заключить в элемент, который нужно центрироваться.
1 2 3 4 5 |
.tray { display: flex; margin-left: auto; margin-right: auto; } |
Flexbox
Вы можете использовать flexbox для центрирования тарелки.
1 2 3 4 |
.desk { display: flex; justify-content: center; } |
Также не нужно оборачивать тарелки в контейнер, чтобы выровнять их по центру. Flexbox может это сделать!
1 2 3 4 |
.desk { display: flex; justify-content: center; } |
CSS позиционирование
Абсолютно позиционируя тарелку, мы можем легко центрировать ее по горизонтали с помощью преобразований CSS.
1 2 3 4 5 |
.plate { position: absolute; left: 50%; transform: translateX(-50%); } |
Если ширина элемента известна, вы можете использовать вместо преобразований CSS отрицательное поле.
1 2 3 4 5 |
.plate { position: absolute; left: 50%; margin-left: -60px; } |
Вертикальное выравнивание
1. Встроенные элементы
Вертикальный отступ
Один из самых простых способов центрировать элемент по вертикали — использовать отступы.
1 2 3 4 |
.desk { padding-top: 24px; padding-bottom: 24px; } |
Вертикальное выравнивание
Свойство vertical-align можно использовать для одного или нескольких элементов. В этом примере вилка и нож должны быть отцентрованы вертикально относительно тарелки.
1 2 3 4 5 6 7 8 9 |
.desk { text-align: center; } .plate, .fork, .knife { vertical-align: middle; } |
Flexbox
Чтобы выровнять тарелку, вилку и нож, мы можем использовать flexbox.
1 2 3 4 5 |
.desk { display: flex; justify-content: center; align-items: center; } |
2. Блочные элементы
Абсолютное позиционирование
Абсолютно позиционируя элемент, можно центрировать его по вертикали с помощью преобразований CSS.
1 2 3 4 5 |
.plate { position: absolute; top: 50%; transform: translateY(-50%); } |
Если высота элемента известна, вы можете использовать отрицательное поле вместо позиционирования.
1 2 3 4 5 |
.plate { position: absolute; top: 50%; margin-top: -60px; } |
CSS-сетка
С помощью CSS-сетки мы можем использовать align-items, чтобы центрировать элемент по вертикали относительно его области сетки.
1 2 3 4 |
.desk { display: grid; align-items: center; } |
Горизонтальное и вертикальное центрирование
1. Встроенные элементы
Отступы и выравнивание текста
Мы можем комбинировать padding и text-align, чтобы центрировать элемент по горизонтали и вертикали.
1 2 3 4 5 |
.plate { text-align: center; padding-top: 24px; padding-bottom: 24px; } |
2. Другие типы элементов
Абсолютное позиционирование
Абсолютно расположим тарелку слева и справа.
1 2 3 4 5 6 |
.plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } |
Flexbox
Установив для justify-content и align-items — center, это легко и просто.
1 2 3 4 5 |
.plate { display: flex; justify-content: center; align-items: center; } |
CSS-сетка
С помощью свойства place-items.
1 2 3 4 |
.desk { display: grid; place-items: center; } |
Автор: Ahmad Shadeed
Источник: ishadeed.com
Редакция: Команда webformyself.