CSS3中盒子居中

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

在CSS3中，可以使用Flexbox或Grid系统来实现盒子居中。以下是两种常见的居中方法：




.center-flex {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使用视口高度 */
}




<div class="center-flex">
  <div>居中的盒子</div>
</div>




.center-grid {
  display: grid;
  place-items: center; /* 水平垂直居中 */
  height: 100vh; /* 使用视口高度 */
}




<div class="center-grid">
  <div>居中的盒子</div>
</div>

这两种方法都可以实现子元素在容器中水平和垂直居中。