Center div vertically in Bootstrap 5

Diposting pada

Center div vertically in Bootstrap 5
How can I center a div vertically in bootstrap 5? It should be aligned in the middle between of content before the div and the screen end.
Tried this:
<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>
It makes the pages longer than it actually is. The div doesn´t looks centered.

Answer
You can do it like this:
• Wrap everything with one div that has 100% screen width and height.
• Use flex-grow-1 for the second div so it takes the remaining height and center everything inside.
<!doctype html>
<html lang=”en”>
<head>
<!– Bootstrap core CSS –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>

 28 total views,  1 views today

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *