Одной из распространенных задач в веб-разработке является вертикальное центрирование элемента на странице. Например, нужно разместить внутренний контейнер по центру родительского элемента, причем эта расстановка должна сохраняться независимо от размеров экрана.
Представим простой пример. Есть основной контейнер (в Bootstrap его часто называют jumbotron), который занимает всю ширину и высоту экрана. Внутри этого контейнера есть другой контейнер (назовем его container), шириной 1025px, который нужно расположить по вертикальному центру страницы.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron d-flex align-items-center min-vh-100">
<div class="container text-center">
<h1 class="display-4">Привет, мир!</h1>
</div>
</div>
</body>
</html>
.jumbotron {
width: 100%;
height: 100%;
}
.container {
width: 1025px;
margin: auto;
}
В данном примере классы d-flex, align-items-center и min-vh-100 Bootstrap используются для центрирования контейнера.
d-flex: применяет к элементу свойствоdisplay: flex;, которое делает его flex-контейнером и позволяет использовать свойства flexbox для центрирования внутренних элементов.align-items-center: устанавливаетalign-items: center;для родительского элемента, что центрирует дочерние элементы по вертикали.min-vh-100: устанавливает минимальную высоту родительского элемента равной высоте экрана.
Таким образом, можно использовать классы Bootstrap для вертикального центрирования контейнера. Это позволяет легко и быстро решить данную задачу без написания дополнительного CSS-кода.
Добавить комментарий