在 Bootstrap 5 中垂直居中 div
[英]Center div vertically in Bootstrap 5
问题描述
如何在引导程序 5 中垂直居中div ？ 它应该在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 看起来不居中。
2 个解决方案
解决方案1
1 已采纳 2022-03-20 05:47:28
你可以这样做：
- 用一个具有 100% 屏幕宽度和高度的
div包装所有内容。 - 对第二个
div使用flex-grow-1，这样它就占据了剩余的高度并将所有内容居中。
<!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>
解决方案2
0 2022-07-19 03:34:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<style>
.card
{
min-width: 320px;
width: 480px;
}
</style>
</head>
<body>
<div class="d-flex align-items-center justify-content-center vh-100">
<div class="card shadow-lg">
<div class="card-header text-bg-danger">
<h2>
<i class="fa-solid fa-user"></i>
Login
</h2>
</div>
<div class="card-body">
<form action="">
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input
placeholder="your registered email"
class="form-control"
type="email"
name="email"
id="email"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input
placeholder="your password"
class="form-control"
type="password"
name="password"
id="password"
/>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-danger">Login</button>
<button type="reset" class="btn btn-secondary">Reset all</button>
</div>
</form>
</div>
</div>
</div>
<script
src="https://kit.fontawesome.com/266b76cb57.js"
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>
如何在Bootstrap中垂直放置div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.