弹性布局居中

使用弹性布局可以很方便地实现居中效果。下面是一个示例代码：

<div class="container">
  <div class="box">居中内容</div>
</div>

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

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
}

上述代码中，`.container`设置为 flex 布局，并使用 `justify-content: center;` 和 `align-items: center;` 属性实现水平和垂直居中。同时，为了让容器占据整个视口，设置了 `height: 100vh;` 属性。`.box` 为需要居中的内容，设置了宽高和背景色，可以根据实际情况进行调整。