居中一个 div - CSS

在网页设计中，有时需要将一个 <div> 元素居中，可以使用 CSS 来实现。以下是一些常用的方法：

方法一：使用 margin 属性

给该元素设置左右 margin 属性为 auto，即可使该元素水平居中。

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

方法二：使用 text-align 属性

将该元素的父元素设置 text-align 为 center，该元素则会居中显示。

.parent {
  text-align: center;
}
.box {
  display: inline-block; /*或者设置为 block */
}

方法三：使用 flex 布局

使用 flex 布局可以使元素快速实现居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 200px;
  height: 200px;
}

以上是一些常用的方法，可以根据具体情况选择适合的方法来实现居中效果。

参考文献：CSS居中一个div的几种实现方式