9.1 Горизонтальное центрирование
Центрирование элементов на веб-странице является одной из основных задач веб-дизайна. Оно позволяет создать эстетически приятные и легко читаемые макеты. Ниже мы рассмотрим различные методы горизонтального и вертикального центрирования элементов, используя современные техники CSS.
1. Центрирование блочных элементов с помощью margin: auto
Одним из самых простых способов центрирования блочных элементов является использование margin: auto.
Пример:
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
<div class="centered-box"></div>
Объяснение кода:
margin: 0 auto;: устанавливает автоматические отступы слева и справа, центрируя элемент по горизонтали
2. Центрирование строчных элементов с помощью text-align
Для центрирования строчных или встроенных элементов внутри блочного элемента можно использовать свойство text-align: center.
Пример:
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
<div class="container">
<div class="inline-element">Строчный элемент</div>
</div>
Объяснение кода:
text-align: center;: центрирует встроенные (строчные) элементы внутри блочного контейнера
3. Центрирование элементов с помощью Flexbox
Flexbox предоставляет гибкий и простой способ центрирования элементов как по горизонтали, так и по вертикали.
Пример:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Объяснение кода:
display: flex;: устанавливает контейнер как Flexboxjustify-content: center;: центрирует элементы по горизонталиalign-items: center;: центрирует элементы по вертикали (будет рассмотрено подробнее далее)
9.2 Вертикальное центрирование
1. Центрирование с помощью Flexbox
Flexbox предоставляет простой способ вертикального центрирования элементов.
Пример:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Объяснение кода:
align-items: center;: центрирует элементы по вертикали
2. Центрирование с помощью CSS Grid
CSS Grid предоставляет мощные возможности для центрирования элементов:
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="grid-container">
<div class="centered-box"></div>
</div>
Объяснение кода:
display: grid;: устанавливает контейнер как CSS Gridplace-items: center;: центрирует элементы по горизонтали и вертикали
3. Вертикальное центрирование с помощью абсолютного позиционирования и CSS трансформации
Использование абсолютного позиционирования и CSS трансформации позволяет центрировать элементы по вертикали.
Пример:
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="container">
<div class="centered-box"></div>
</div>
Объяснение кода:
position: absolute;: устанавливает элемент в абсолютное позиционирование относительно контейнераtop: 50%;,left: 50%;: смещает элемент на 50% от верхнего и левого края контейнераtransform: translate(-50%, -50%);: смещает элемент на 50% его ширины и высоты для центрирования
4. Вертикальное центрирование с помощью таблицы и ячеек
Использование таблицы и ячеек для центрирования элементов по вертикали.
Пример:
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
<div class="table-container">
<div class="table-cell">
<div class="centered-box">Центрированный элемент</div>
</div>
</div>
Объяснение кода:
.table-container: создает контейнер с дисплеемtable.table-cell: создает ячейку таблицы с вертикальным выравниваниемmiddle
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ