要使用CSS使div
居中,可以使用多种方法,以下是两种常见的方法:
- 使用Flexbox布局居中(水平和垂直):
.center-flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使div的高度为视口高度 */
}
<div class="center-flex">
<!-- 内容 -->
</div>
- 使用Grid布局居中(水平和垂直):
.center-grid {
display: grid;
place-items: center;
height: 100vh; /* 使div的高度为视口高度 */
}
<div class="center-grid">
<!-- 内容 -->
</div>
以上两种方法均可使div
在其父元素中水平和垂直居中。