Кратко
Центрирование CSS — это проблема, с которой часто сталкиваются фронтенд-инженеры, а также один из базовых навыков. Сегодня у меня есть время собрать и разобрать схемы центрирования CSS, на данный момент существует 15 схем, включая центрирование по горизонтали, центрирование по вертикали и центрирование по горизонтали и вертикали. Если что-то отсутствует, оно будет добавлено одно за другим и будет рассматриваться как меморандум.
1 по центру по горизонтали
1.1 Центрирование встроенных элементов по горизонтали
использоватьtext-align: centerПозволяет горизонтально центрировать строчные элементы внутри блочных элементов. Этот метод работает со встроенными элементами (inline), встроенный блок (inline-block), Встроенный стол (inline-table), inline-flexУровень элемента эффективен.
Основной код:
.center-text {
text-align: center;
}
Демонстрационная программа:
1.2 Горизонтальное центрирование блочных элементов
Размещая блочный элемент фиксированной шириныmargin-leftа такжеmargin-rightУстановите значение auto для центрирования элементов уровня блока по горизонтали.
Основной код:
.center-block {
margin: 0 auto;
}
Демонстрационная программа:
1.3 Горизонтальное центрирование многоблочных элементов
1.3.1 Использованиеinline-block
Если в строке есть два или более блочных элемента, установив тип отображения блочного элемента наinline-blockи родительский контейнерtext-alignатрибут для горизонтально центрированных многоблочных элементов.
Основной код:
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}
Демонстрационная программа:
1.3.2 Использованиеdisplay: flex
Использовать гибкий макет (flex) для достижения горизонтального центрирования, гдеjustify-contentОн используется для установки выравнивания элемента flexbox в направлении главной оси (горизонтальной оси).В этом примере подэлементы настроены для отображения в горизонтальном центре.
Основной код:
.flex-center {
display: flex;
justify-content: center;
}
Демонстрационная программа:
2 Центрировать по вертикали
2.1 Однострочный встроенный (inline-) элемент вертикально сосредоточен
Установив высоту встроенного элемента (height) и высота строки (line-height) равны, тем самым центрируя элемент по вертикали.
Основной код:
#v-box {
height: 120px;
line-height: 120px;
}
Демонстрационная программа:
2.2 Вертикальное центрирование многострочных элементов
2.2.1 Использование макета таблицы (table)
с помощью макета таблицыvertical-align: middleМожет быть достигнуто вертикальное центрирование дочерних элементов.
Основной код:
.center-table {
display: table;
}
.v-cell {
display: table-cell;
vertical-align: middle;
}
Демонстрационная программа:
2.2.2 Использование гибкого макета (flex)
Используйте гибкий макет для достижения вертикального центрирования, гдеflex-direction: columnОпределяет направление главной оси как вертикальное. Поскольку гибкий макет определен в CSS3, в старых браузерах возникают проблемы с совместимостью.
Основной код:
.center-flex {
display: flex;
flex-direction: column;
justify-content: center;
}
Демонстрационная программа:
2.2.3 Используйте «эльфийский элемент»
Используйте технологию «элемент-призрак» для достижения вертикального центрирования, то есть поместите псевдоэлемент высотой 100% в родительский контейнер, чтобы выровнять текст и псевдоэлемент по вертикали, чтобы достичь цели вертикального центрирования.
Основной код:
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 20rem;
}
Демонстрационная программа:
2.3 Вертикально центрирующие элементы блочного уровня
2.3.1 Блочные элементы фиксированной высоты
Мы знаем высоту и ширину центрируемого элемента, и проблема вертикального центрирования проста. Позиционируя элемент абсолютно на 50% сверху и устанавливаяmargin-topСместите элемент вверх на половину высоты, чтобы добиться вертикального центрирования.
Основной код:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
Демонстрационная программа:
2.3.2 Блочные элементы неизвестной высоты
Когда высота и ширина вертикально центрированного элемента неизвестны, мы можем использовать CSS3transformМетод смещения свойства в направлении, противоположном оси Y, на 50 % обеспечивает центрирование по вертикали. Но у некоторых браузеров есть проблемы с совместимостью.
Основной код:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Демонстрационная программа:
3 Центрирование по горизонтали и вертикали
3.1 Элементы с фиксированной шириной и высотой центрируются по горизонтали и вертикали
Преобразовывает половину общей ширины элемента по краю, чтобы центрировать элемент по горизонтали и вертикали.
Основной код:
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
Демонстрационная программа:
3.2 Элементы неизвестной ширины и высоты центрированы по горизонтали и вертикали
Используя 2D-преобразование, элемент центрируется по горизонтали и вертикали путем перемещения половины ширины и высоты в противоположном направлении как по горизонтали, так и по вертикали.
Основной код:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Демонстрационная программа:
3.3 Использование гибкого макета
Используйте гибкий макет, гдеjustify-contentИспользуется для установки или получения выравнивания элементов flexbox в основном (горизонтальном) направлении; иalign-itemsСвойство определяет выравнивание flex-потомков в поперечном (вертикальном) направлении текущей строки flex-контейнера.
Основной код:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Демонстрационная программа:
3.4 Использование макета сетки
Использование сетки для горизонтального и вертикального центрирования имеет плохую совместимость и не рекомендуется.
Основной код:
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}
Демонстрационная программа:
3.5 Центрирование по горизонтали и вертикали на экране
Горизонтальное и вертикальное центрирование на экране очень распространено и требуется для обычных страниц входа и регистрации. Для обеспечения лучшей совместимости также требуется макет таблицы.
Основной код:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
}
Демонстрационная программа:
4 Описание
Части текста и кода, описанные в этой статье, собраны из Интернета. Из-за нехватки времени, ограниченных возможностей и других причин возникает множество проблем, таких как неточное текстовое описание и недостаточное тестирование кода. Поэтому он ограничен рамками обучения и не подходит для практического применения.
Описанное в тексте решение — это только часть решения центрирования, а не все. Кроме того, в коде есть проблемы совместимости с CSS3 flex, transform, grid и другим содержимым.
5 ссылок на цитаты
Centering in CSS: A Complete Guide
How To Center Anything With CSS
Как центрировать DIV по горизонтали и вертикали на экране?