有一种简单的方法可以在div中垂直居中,即使用CSS的display: flex
和align-items: center
属性。以下是一个简单的示例:
<!DOCTYPE html>
<html>
<head><style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div>
这是一个垂直居中的文本。
</div>
</div>
</body>
</html>
在这个示例中,我们创建了一个名为.container
的CSS类,并设置了display: flex
和align-items: center
属性。这使得.container
内部的所有元素都垂直居中。我们还设置了height: 100vh
和justify-content: center
属性,以使容器占据整个视口高度,并在水平方向上居中。
这种方法非常简单,并且适用于大多数现代浏览器。
领取专属 10元无门槛券
手把手带您无忧上云