css中盒子居中的3种方式

CSS中盒子居中的三种方式包括：

1. 使用margin属性：通过设置左右外边距为auto，可以将盒子水平居中。例如，可以使用以下代码将一个宽度为200px的盒子水平居中：

.box {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

2. 使用flexbox布局：将父容器的display属性设置为flex，并使用justify-content和align-items属性来水平垂直居中盒子。例如，可以使用以下代码将一个盒子水平垂直居中：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
}

3. 使用transform属性：通过将盒子的position属性设置为absolute，并使用transform属性来平移盒子，可以实现水平和垂直居中。例如，可以使用以下代码将一个宽度为200px的盒子水平垂直居中：

.box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这些是CSS中常用的盒子居中的三种方式。根据具体的需求和情况，可以选择适合的方式来实现盒子的居中。