CSS 垂直居中是网页设计中的一个重要概念。它指的是在一个元素内部，该元素的上下内容能够完全重合，形成一条线。为了实现这一效果，CSS 提供了多种方法，其中最常用的是使用绝对定位和 transform 属性。
绝对定位
绝对定位是指一个元素相对于其原始位置进行定位，不会受到其他元素的干扰。我们可以通过设置元素的 position 属性为 absolute，然后设置 top、right、bottom 和 left 属性来控制元素的位置。例如，以下代码实现了一个 div 元素相对于其父元素进行垂直绝对定位：
<!DOCTYPE html>
<html>
<head>
<title>绝对定位示例</title>
<style>
.container {
position: relative;
height: 200px;
border: 1px solid black;
}
.vertically-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="vertically-centered">
这是一个垂直居中的元素！
</div>
</div>
</body>
</html>
在上面的代码中，我们创建了一个容器 div，并设置了其 position 属性为 relative。接着，我们在容器内部创建了一个垂直居中的元素，并设置了它的 position 属性为 absolute，同时通过 top 和 left 属性将其距离容器顶部和左边的距离设为 50%，最后通过 transform 属性将元素向左上方移动 50% 的距离，从而实现了垂直居中的效果。
transform 属性
transform 属性是一个 3D 变换，可以用来调整元素的形状、大小、旋转等。我们可以通过 transform 属性来实现元素的垂直居中。具体做法是：设置元素的 display 属性为 flex 或 grid，然后设置 align-items 属性为 center，justify-content 属性为 center。这样，元素就可以在该方向上实现了垂直居中。例如，以下代码实现了同一容器内部的另一个 div 元素相对于其本身进行垂直居中：
<!DOCTYPE html>
<html>
<head>
<title>transform 垂直居中示例</title>
<style>
.container {
position: relative;
height: 200px;
border: 1px solid black;
}
.vertically-centered {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="vertically-centered">
这是垂直居中的元素！
</div>
</div>
</body>
</html>
在上面的代码中，我们同样创建了一个容器 div，并在其中创建了一个垂直居中的元素。与前一个例子不同的是，我们使用了 display: flex 将元素的 display 属性设置为 flex，并设置了 align-items 和 justify-content 属性为 center。这样，元素就会在该方向上实现垂直居中。同时，我们还将元素的高度和宽度都设为 100%，使其充满整个容器。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
