在 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.