让盒子居中显示的方法

要让一个盒子居中显示，可以使用以下方法：

1. 使用 margin 属性。将左右 margin 设置为 auto，可以使盒子在容器中水平居中。

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

2. 使用 Flexbox 布局。将容器的 display 属性设置为 flex，并使用 justify-content 和 align-items 属性来水平和垂直居中。

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

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

3. 使用 Grid 布局。将容器的 display 属性设置为 grid，并将盒子放在容器的中心单元格中。

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

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