css 样式 盒子居中的几种方式

1. 使用margin属性：设置左右margin为auto，高度和宽度需要设定明确的值。

例如：

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

2. 使用flexbox布局：使用display: flex和justify-content:center和align-items:center来对齐元素。

例如：

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

3. 使用grid布局：使用display:grid和justify-content:center和align-items:center来对齐元素。

例如：

.container {
  display: grid;
  place-items: center;
}

4. 使用绝对定位和transform：使用position:absolute和top:50%和left:50%以及transform:translate(-50%,-50%)来居中元素。

例如：

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

5. 使用table-cell布局：使用display: table和display:table-cell和text-align:center和vertical-align:middle来对齐元素。

例如：

.container {
  display: table;
}

.box {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}