flex布局实现居中对齐

使用 flex 布局可以很方便地实现居中对齐，具体方法如下：

1. 将父元素设置为 flex 布局，使用 `display: flex;` 实现。

2. 设置子元素的水平和垂直方向的对齐方式。

水平居中对齐：使用 `justify-content: center;` 实现。

垂直居中对齐：使用 `align-items: center;` 实现。

3. 如果子元素宽高不确定，可以使用 `flex: 1;` 让子元素自适应父元素的尺寸。

代码示例：

<div class="container">
  <div class="box">居中对齐</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 为了让容器铺满整个视口 */
}

.box {
  flex: 1;
  text-align: center;
}

以上代码可以实现将容器内的内容居中对齐，并且容器会铺满整个视口。