如何使用flex布局实现水平居中？

使用flex布局实现水平居中可以通过以下步骤实现：

1. 在父容器上设置display属性为flex，将其变为一个flex容器。
2. 使用justify-content属性设置主轴上的对齐方式为center，这样子元素就会在水平方向上居中对齐。
3. 可选步骤：如果需要在垂直方向上也居中对齐，可以使用align-items属性设置交叉轴上的对齐方式为center。

下面是一个示例代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center; /* 可选 */
}