Центрировать div по вертикали в Bootstrap 5
Как я могу центрировать div по вертикали в bootstrap 5?
Он должен быть выровнен посередине между содержимым перед div и концом экрана.
Пробовал это:
<div>some content</div>
<div class = "d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div>div that should be centered</div>
</div>
Это делает страницы длиннее, чем они есть на самом деле. Div не выглядит центрированным.
Ответы 1
Вы можете сделать это следующим образом:
- Оберните все одним
div, который имеет 100% ширины и высоты экрана. - Используйте
flex-grow-1для второгоdiv, чтобы он занял оставшуюся высоту и центрировал все внутри.
<!doctype html>
<html lang = "en">
<head>
<!-- Bootstrap core CSS -->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
</head>
<body>
<div class = "d-flex flex-column min-vh-100 min-vw-100">
<div>This div is not centered.</div>
<div class = "d-flex flex-grow-1 justify-content-center align-items-center">
<div>This div is centered.</div>
</div>
</div>
</body>
</html>Я обновил свой ответ одним div в начале тела. Проверь это.
Теперь появилась полоса прокрутки. Например, если первый div имеет высоту 25%, второй div не будет отображаться посередине, потому что ниже добавляется прокручиваемое пространство.
Да, конечно. Вы добавили min-vh-100, чтобы сделать второй div, который обтекает центрированный div. Это означает, что высота второго блока будет иметь минимальное значение высоты экрана. Ваше желаемое поведение состоит в том, чтобы иметь оба div, но не прокручивать?
Второй div должен располагаться по центру по вертикали между содержимым выше и концом страницы.
Я понимаю. Я обновил свой ответ. Можешь еще раз проверить?
Если вы добавите немного "lorem ipsum" в начале тела, вы увидите проблему.