我需要在页面中垂直放置一个div
<div class="d-flex align-items-center justify-content-center">
<div class="w-100">
<p>My Content Here</p>
</div>
</div>
我的代码在哪里
<div>
<h2>My Content</h2>
</div>
<div class="d-flex align-items-center justify-content-center">
<div class="w-100">
<p>My Content Here</p>
</div>
</div>
<div>
<P>My Content</P>
</div>
我的Html像这样
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<base href="/cfm">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<script defer src="https://use.fontawesome.com/releases/v6.1.2/js/all.js" integrity="sha384-11X1bEJVFeFtn94r1jlvSC7tlJkV2VJctorjswdLzqOJ6ZvYBSZQkaQVXG0R4Flt" crossorigin="anonymous"></script>
</body>
</html>
使用翻译属性
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
对于我来说，您只需省略父级中的嵌套div。
<div class="d-flex align-items-center justify-content-center">
<p>My Content Here</p>
</div>
在容器div中添加另一个类h-100，以确保它适合body
<div class="d-flex align-items-center justify-content-center h-100">
<div class="w-100">
<p>My Content Here</p>
</div>
</div>
Display Grid还可以帮助您在垂直和水平方向上居中
.center {
display: grid;
place-items: center;
min-height: 400px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div class="d-flex align-items-center justify-content-center">
<div class="w-100 center">
<p>My Content Here</p>
</div>
</div>
</body>
</html>你可以简单地像这样居中:
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
这将使它在垂直和水平方向居中。如果你只想让它垂直居中，只需使用顶部和底部padding:
padding: 70px 0;
<div class="d-flex flex-column" style="min-height: 100vh">
<div>Head</div>
<div class="d-flex align-items-center justify-content-center" style="flex: 100%">
<p>Content Here</p>
</div>
<div class="mt-auto">Footer</div>
</div>