CSS盒子居中的常用的几种方法(小结)

当我们想让一个CSS盒子居中时，常见的方法有以下几种：

方法一：使用margin属性

我们可以通过设置CSS盒子的左右margin值为auto，来实现水平居中。例如：

.box {
  width: 200px;
  height: 100px;
  margin: 0 auto;
}

如果要同时实现垂直居中，我们可以使用绝对定位（position）和相对定位（relative）的组合，来实现：

<div class="parent">
  <div class="child">
    这是居中的文本
  </div>
</div>

<style>
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

方法二：使用flex布局

flex布局是CSS3中新增的一种布局方式，它使得盒子的布局更加灵活。我们可以通过设置display为flex，并设置justify-content和align-items属性为center，来实现水平和垂直居中。例如：

<div class="parent">
  <div class="child">
    这是居中的文本
  </div>
</div>

<style>
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style>

以上是CSS盒子居中的两种常用方法，根据实际情况选择适合自己的方法。