Issue
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.
Solution
You can do it like this:
- Wrap everything with one
divthat has 100% screen width and height. - Use
flex-grow-1for the seconddivso 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>Answered By - NeNaD
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.