这篇文章上次修改于 816 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

flex 布局可以实现水平和垂直的居中，具体方法如下：

水平居中

水平居中可以使用 justify-content 属性，设置为 center 即可。

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

这样，容器中的所有子元素都会水平居中。

如果需要水平居中单个子元素，可以使用 align-self 属性，设置为 center 即可。

.container {
  display: flex;
}

.item {
  align-self: center;
}

这样，.item 元素会水平居中。

垂直居中

垂直居中可以使用 align-items 属性，设置为 center 即可。

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

这样，容器中的所有子元素都会垂直居中。

如果需要垂直居中单个子元素，可以使用 align-self 属性，设置为 center 即可。

.container {
  display: flex;
}

.item {
  align-self: center;
}

这样，.item 元素会垂直居中。

示例

以下是 flex 布局水平垂直居中的示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

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

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

输出：

    1
    2
    3

注意事项

• 在使用 flex 布局实现居中时，需要注意容器的 display 属性设置为 flex。
• 在使用 align-self 属性时，需要注意子元素的 display 属性不能设置为 inline 或 inline-block。