предисловие
Эта статья в основном знакомит с центрированием по горизонтали, центрированием по вертикали и различными методами центрирования по горизонтали и вертикали.
1. Горизонтальный центр
1. Строчные элементы располагаются по центру по горизонтали
Используйте text-align: center для горизонтального центрирования строчных элементов внутри блочных элементов.. Этот метод действителен для горизонтального центрирования элементов inline, inline-block, inline-table и inline-flex.
.parent{
text-align:center;//在父容器设置
}
Кроме того, если элемент уровня блока заключен внутри элемента уровня блока,Мы можем сначала изменить его с блочного элемента на встроенный блочный элемент, а затем установить встроенный блочный элемент в центр, чтобы добиться горизонтального центрирования..
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent{
text-align:center;
}
.child {
display: inline-block;
}
</style>
2. Горизонтальное центрирование блочных элементов
Эта ситуация может быть реализована несколькими способами, которые мы подробно опишем ниже:
① Установите для левого и правого полей левого и правого полей элемента блочного уровня значение auto.
.child{
width: 100px;//确保该块级元素定宽
margin:0 auto;
}
②Использовать таблицу+маржу
Сначала установите дочерний элемент как таблицу уровня блока для отображения (аналогично), а затем установите его в горизонтальном центре.
display:table ведет себя как блочный элемент, но имеет такую же ширину, как и содержимое.
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: table;
margin: 0 auto;
}
</style>
③Использовать абсолютное + преобразование
Сначала установите относительное позиционирование родительского элемента, затем установите абсолютное позиционирование дочернего элемента, переместите дочерний элемент вправо на половину расстояния от родительского контейнера и, наконец, переместите дочерний элемент влево на половину ширины для достижения горизонтального положения. центрирование.
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}
.parent {
position:relative;
}
</style>
Тем не менее, преобразование относится к содержимому css3, есть определенные проблемы с совместимостью, а в браузерах с более высокими версиями необходимо добавить некоторые префиксы..
④Используйте flex+justify-content
Горизонтальное центрирование достигается с помощью свойства justify-content в flex, инструменте компоновки в CSS3.
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content:center;
}
</style>
⑤ Используйте flex+margin
Установите для родительского контейнера гибкий макет через flex, а затем установите дочерний элемент в центр.
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
}
.child {
margin:0 auto;
}
</style>
3. Многоблочные элементы располагаются по центру по горизонтали
① Использование гибкого макета
Используйте гибкую компоновку (flex) для достижения горизонтального центрирования, где justify-content используется для установки выравнивания элемента эластичного блока в направлении главной оси (горизонтальная ось по умолчанию)., в этом примере дочерний элемент устанавливается по центру по горизонтали.
#container {
display: flex;
justify-content: center;
}
②Использование встроенного блока
Установите для блочного элемента горизонтальное расположение display:inline-block, а затем установите text-align:center для родительского элемента, чтобы добиться того же эффекта, что и горизонтальное центрирование встроенного элемента выше..
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}
4. Отцентрируйте плавающий элемент по горизонтали
- Для плавающих элементов фиксированной ширины установите относительное + отрицательное поле через дочерние элементы
- Для плавающих элементов переменной ширины как родительские, так и дочерние контейнеры используют относительное позиционирование.
- Общий метод (будь то фиксированная ширина или переменная ширина): гибкий макет
① Неплавающие элементы фиксированной ширины
Задайте относительную + отрицательную маржу через дочерние элементы, принцип показан на следующем рисунке:
.child {
position:relative;
left:50%;
margin-left:-250px;
}
<div class="parent">
<span class="child" style="float: left;width: 500px;">我是要居中的浮动元素</span>
</div>
② Плавающие элементы с переменной шириной
И родительский, и дочерний контейнеры расположены относительно друг друга, а смещение смещения показано на следующем рисунке:
<div class="box">
<p>我是浮动的</p>
<p>我也是居中的</p>
</div>
.box{
float:left;
position:relative;
left:50%;
}
p{
float:left;
position:relative;
right:50%;
}
③Гибкий макет общего метода (будь то фиксированная ширина или переменная ширина)
Использование гибкой верстки (flex)justify-contentАтрибут для достижения горизонтального центрирования.
.parent {
display:flex;
justify-content:center;
}
.chlid{
float: left;
width: 200px;//有无宽度不影响居中
}
<div class="parent">
<span class="chlid">我是要居中的浮动元素</span>
</div>
5. Абсолютно расположенные элементы центрированы горизонтально
Этот путь очень уникален,Абсолютное позиционирование через дочерние элементы, плюсmargin: 0 autoреализовать.
<div class="parent">
<div class="child">让绝对定位的元素水平居中对齐。</div>
</div>
.parent{
position:relative;
}
.child{
position: absolute; /*绝对定位*/
width: 200px;
height:100px;
background: yellow;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略，且为0*/
right: 0;/*此处不能省略，且为0*/
}
2. Вертикальное центрирование
1. Вертикальное центрирование однострочных встроенных элементов
<div id="box">
<span>单行内联元素垂直居中。</span>。
</div>
<style>
#box {
height: 120px;
line-height: 120px;
border: 2px dashed #f69c55;
}
</style>
2. Многострочные встроенные элементы центрированы по вертикали.
① Использование гибкого макета (flex)
Используйте гибкий макет для достижения вертикального центрирования, где flex-direction: column определяет направление основной оси как вертикальное.. Этот подход имеет проблемы совместимости со старыми браузерами.
<div class="parent">
<p>Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
.parent {
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
border: 2px dashed #f69c55;
}
</style>
②Использование макета таблицы (таблица)
Используйте вертикальное выравнивание: середина макета таблицы, чтобы добиться вертикального центрирования дочерних элементов.
<div class="parent">
<p class="child">The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.</p>
</div>
<style>
.parent {
display: table;
height: 140px;
border: 2px dashed #f69c55;
}
.child {
display: table-cell;
vertical-align: middle;
}
</style>
3 элемента блочного уровня центрированы по вертикали
①Использовать абсолютное + отрицательное поле (известная высота и ширина)
Этого можно добиться путем абсолютного позиционирования элемента на 50 % сверху и установки margin-top на смещение половины высоты элемента вверх..
<div class="parent">
<div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
②Использовать абсолютное + преобразование
Когда высота и ширина вертикально центрированного элемента неизвестны, вертикальное центрирование может быть достигнуто путем смещения 50% оси Y в обратном направлении оси Y с помощью свойства преобразования в CSS3.. Но у некоторых браузеров есть проблемы с совместимостью.
<div class="parent">
<div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
③Используйте flex+align-items
Центрируйте дочерние элементы по вертикали, установив свойство align-items в гибком макете..
<div class="parent">
<div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
display:flex;
align-items:center;
}
④Используйте table-cell+vertical-align
Отображается путем преобразования родительского элемента в ячейку таблицы (что-то вроде<td>а также<th>), а затем установитьvertical-alignдля вертикального центрирования содержимого ячейки таблицы.
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
Три, горизонтальное и вертикальное центрирование
Есть также много способов реализовать эту ситуацию.Далее мы объясним:
Метод 1: абсолютное позиционирование и реализация отрицательного поля (известная высота и ширина)
Этот метод должен знать высоту и ширину вертикально центрированного элемента, чтобы вычислить значение поля, которое совместимо со всеми браузерами..
// css部分
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
// html部分(这部分不做变化,下面例子直接共用)
<body>
<div id='container'>
<div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
</body>
Способ 2: Абсолютное позиционирование и поля: авто (известная высота и ширина)
Для этого метода не требуется знать высоту и ширину вертикально центрированного элемента, но он не совместим с более ранними версиями браузеров IE.
#container {
position: relative;
height:100px;//必须有个高度
}
#center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;//注意此处的写法
}
Способ 3: абсолютное позиционирование + CSS3 (неизвестная высота и ширина элемента)
Используя преобразование Css3, вы можете легко добиться вертикального центрирования элементов, не зная высоты и ширины элементов.. Трансформация CSS3 проста в использовании, но при реальном применении проекта необходимо учитывать вопросы совместимости.Большое количество хакерских кодов может привести к большему убытку, чем выигрышу.
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Способ 4: гибкий макет
Используйте гибкую компоновку, где justify-content используется для установки или извлечения выравнивания элемента flex box в направлении основной оси (горизонтальной оси); а свойство align-items определяет боковую ось (вертикальную ось) дочернего элемента flex в текущая строка flex-контейнера, выравнивание по направлению. Не совместим с более ранними версиями браузеров IE.
#container {//直接在父容器设置即可
height: 100vh;//必须有高度
display: flex;
justify-content: center;
align-items: center;
}
Способ 5: flex/grid и margin:auto (самый простой способ написания)
Элемент контейнера настроен на гибкий макет или макет сетки, а дочернему элементу нужно только написать margin: auto. Он не совместим с более ранними версиями браузеров IE.
#container {
height: 100vh;//必须有高度
display: grid;
}
#center {
margin: auto;
}
постскриптум
Ведение блога — дело очень трудоемкое, особенно если у вас есть изначальное намерение написать хороший блог, до и после этой статьи на это ушло более пяти-шести часов, но мне это часто доставляет удовольствие! С одной стороны, я читал много блогов, и я не чувствую, что освоил это, не разбирая вручную; с другой стороны, делиться своим опытом обучения - очень радостное дело, и я готов расти и прогрессировать вместе с вами! Если вы считаете, что эта статья хороша, не забудьте поставить лайк и подписаться! Потому что зачастую в ободрении и поддержке окружающих больше всего нуждаются обычные люди!