CSS——未知宽高元素的水平垂直居中的方法
在CSS中，可以使用Flexbox或Grid系统来实现未知宽高元素的水平垂直居中。以下是两种方法的示例代码：
Flexbox方法：
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 父容器高度设置为视口高度 */
}
.child {
/* .child内容 */
}
<div class="parent">
<div class="child">
<!-- 内容 -->
</div>
</div>Grid方法：
.parent {
display: grid;
place-items: center; /* 水平垂直居中的简写 */
height: 100vh; /* 父容器高度设置为视口高度 */
}
.child {
/* .child内容 */
}
<div class="parent">
<div class="child">
<!-- 内容 -->
</div>
</div>在这两种方法中，.parent 是需要进行居中的容器元素，.child 是其中的子元素。这两种方法都能够实现子元素在容器中水平和垂直居中，无论子元素的宽高如何变化。
评论已关闭