开发过程中居中对齐是最常见最基础的需求。根据具体情况（元素类型，父容器属性等），有很多方式可以实现居中。写下这篇笔记的原因是 2024 CSS 终于可以通过 align-content 属性实现垂直居中，顺便巩固其他的居中方式吧。

<div class="parent">
  <div class="child">居中元素</div>
</div>

使用 flex 布局实现居中

flex 弹性布局时最现代化，最简洁的布局方式之一，适用于大部分的场景。

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 给父容器设置一个高度 */
  border: 1px solid #ddd;
}

通过给父容器设置 flex 布局，让子元素水平垂直居中。（垂直居中需设置高度）

使用 grid 布局实现居中

.parent {
  display: grid;
  place-items: center; /* 居中 */
  height: 200px; /* 给父容器设置一个高度 */
  border: 1px solid #ddd;
}

使用定位的方式实现居中

.parent {
  position: relative;
  height: 200px;
  border: 1px solid #ddd;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 通过平移元素居中 */
}

使用表格布局实现居中

.parent {
  display: table; /* 模拟表格布局 */
  height: 200px;
  border: 1px solid #ddd;
}

.child {
  display: table-cell; /* 表格单元格布局 */
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

使用 absolute 和 margin 实现居中

auto 的作用为： 自动填充剩余空间。

垂直方向上，块级元素不会自动扩充，外部尺寸没有自动充满父元素， 所以没有剩余空间可言 。如果子元素设置了 绝对定位 且四边都设为 0，子元素会填充整个父元素的所有剩余空间，auto就能平均分配水平和垂直方向的剩余空间了。

.parent {
  height: 200px;
  border: 1px solid #ddd;
  position: relative;
}

.child {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; /* 通过 margin: auto 实现水平和垂直居中 */
}

使用 align-content 属性实现垂直居中

align-content 是 2024 年的 CSS 原生属性中新增的属性，通过设置 align-content: center 实现垂直居中。而无需 flex 或者 gird 布局。

因为是新特性所以需要注意一下浏览器的兼容程度