Вертикальное центрирование
Чтобы центрировать что-либо по вертикали в CSS, используйте современную технику компоновки, такую как Flexbox или Grid, либо позиционирование с трансформациями.
Центрирование с Flexbox
Flex-контейнер CSS может центрировать свои элементы как по горизонтали, так и по вертикали.
Для контейнера нужно задать два свойства: justify-content и align-items. Присвойте обоим значение center, и элементы будут центрированы по каждой оси.
Пример
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Flexbox</title>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center with Flexbox</h2>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Центрирование с Grid
Grid-контейнер CSS может делать то же самое, центрируя элементы в обоих направлениях.
Здесь достаточно одного свойства: если задать place-items значение center для grid-контейнера, элементы будут центрированы по каждой оси.
Пример
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Grid</title>
<style>
.center {
display: grid;
place-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center with Grid</h2>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Центрирование с помощью position и transform
Когда размеры элемента неизвестны или динамичны, сочетайте position: absolute с transform: translate(), чтобы центрировать его.
Пример
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Position and Transform</title>
<style>
.container {
position: relative;
height: 200px;
border: 3px solid green;
}
.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Center with position and transform</h2>
<div class="container">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>