- # Горизонтальное центрирование
- 1. Центрируемый элемент строчный (inline):
- 2. Центрируемый элемент блочный (block):
- 3. Несколько блочных элементов в ряду:
- # Вертикальное центрирование
- 1. CSS метод со свойствами таблиц
- 2. Центрирование с помощью внутренних отступов (если элемент строчный )
- 3. Использование line-height
- 4. Абсолютное позиционирование (если элемент блочный)
- 5. Использование flexbox (если элемент блочный)
- # Горизонтальное и вертикальное центрирование
- 1. Фиксированная высота и ширина элемента
- 2. Высота и ширина элемента неизвестны
- 3. Flexbox снова приходит на помощь
# Горизонтальное центрирование
Тема центрирования довольно популярная, существует уже множество разных способов. В этой статье вы найдете работающие способы как горизонтального, так вертикального центрирования, которые реализуются достаточно просто.
1. Центрируемый элемент строчный (inline):
Можно назначить родительскому контейнеру свойство text-align:
center
. Ниже пример:
See the Pen wzjPWN by Ruslan (@rkaliev) on CodePen.0
2. Центрируемый элемент блочный (block):
В этом случае задаем ему ширину (иначе он займёт всю ширину родительского контейнера и не будет нуждаться в центрированиии) и автоматическую установку левого и правого полей: margin-left: auto
и margin-right: auto
. Часто используют такую сокращённую запись: margin: 0 auto; Этот способ работает вне зависимо от ширины центрируемого блочного элемента и его родителя. Ниже пример:
See the Pen BLxmLr by Ruslan (@rkaliev) on CodePen.0
3. Несколько блочных элементов в ряду:
Можно указать для них тип отображения inline-block
или же применить flexbox. Ниже пример:
See the Pen YGLEpa by Ruslan (@rkaliev) on CodePen.0
# Вертикальное центрирование
Что же касается текста, то многие для центрирования по вертикали начинают использовать свойство vertical-align, что вполне логично. Но, к сожалению, оно не действует в блочных элементах (например,в параграфах (p) внутри элемента (div)). Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.
1. CSS метод со свойствами таблиц
Свойство vertical-align отлично действует для ячеек таблиц. Представим родительский элемент как таблицу, а дочерний как ячейку и применим свойство vertical-align: middle для вертикального центрирования содержания. В итоге контент в элементе-потомке отцентрируется по вертикали. Рассмотрим наш пример:
HTML:
1
2
3
|
<div class=«parent»>
<div class=«child»>Какой-то Текст…</div>
</div>
|
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.parent {
display: table; // Представили родительский элемент как таблицу
width: 200px;
height: 200px;
background: #f06d06;
text-align: center;
color: #fff;
font-size: 22px;
}
.child {
display: table-cell; // дочерний — как ячейку
vertical-align: middle; // отцентрировали содержимое вертикально
}
|
2. Центрирование с помощью внутренних отступов (если элемент строчный )
Если элемент помещается в одну строку, то его можно отцентрировать с помощью одинаковых верхних и нижних внутренних отступов (padding).
CSS:
1
2
3
4
|
.link {
padding-top: 30px;
padding-bottom: 30px;
}
|
Пример:
See the Pen JRvOEJ by Ruslan (@rkaliev) on CodePen.0
3. Использование line-height
Если предыдущий способ вам не подходит, а вы хотите отцентрировать текст, чтоб он не переносился на следующую строку, можно использовать line-height
равный высоте элемента:
CSS:
1
2
3
4
5
|
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
|
Пример:
See the Pen ALabqL by Ruslan (@rkaliev) on CodePen.0
4. Абсолютное позиционирование (если элемент блочный)
Если вам известна высота центрируемого элемента, то вот еще один способ вертикального центрирования.
CSS:
1
2
3
4
5
6
7
8
|
.parent { position: relative; }
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* учитывайте поля и границы, если не используете box-sizing: border-box; */
}
|
Пример:
See the Pen jrxamO by Ruslan (@rkaliev) on CodePen.0
Если вам не известна высота центрируемого элемента, то решение тоже есть. Поднять вверх на половину его высоты после того, как сдвинули его наполовину вниз:
CSS:
1
2
3
4
5
6
7
|
.parent { position: relative; }
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
|
А вот и пример:
See the Pen LRmOyO by Ruslan (@rkaliev) on CodePen.0
5. Использование flexbox (если элемент блочный)
Используя flexbox, можно всё сделать проще с меньшим количеством кода.
CSS:
1
2
3
4
5
|
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
|
А вот и пример:
See the Pen mALqmG by Ruslan (@rkaliev) on CodePen.0
# Горизонтальное и вертикальное центрирование
1. Фиксированная высота и ширина элемента
Если у элемента фиксированная высота и ширина, то используем отступы с отрицательными значениями, равными половине высоты и ширины элемента после того, как для него было прописано абсолютное позиционирование в точке 50%/50%, это и отцентрирует элемент внутри родителя. Способ хорошо поддерживается браузерами.
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.parent { position: relative;}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
|
Пример:
See the Pen yajPXY by Ruslan (@rkaliev) on CodePen.0
2. Высота и ширина элемента неизвестны
Если вам неизвестны ширина или высота центрируемого элемента, то можно воспользоваться свойством transform
и отрицательным значением translate
по 50% в обеих направлениях (вычисляется от текущей ширины/высоты элемента):
CSS:
1
2
3
4
5
6
|
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
|
3. Flexbox снова приходит на помощь
Для центрирования горизонтально и вертикально подойдет также flexbox:
CSS:
1
2
3
4
5
|
.parent {
display: flex;
justify-content: center;
align-items: center;
}
|
See the Pen vXjWkA by Ruslan (@rkaliev) on CodePen.0
Источник: css-tricks.com