HTML利用css怎么实现两个盒子上下对齐且居中

要实现两个盒子上下对齐且居中，可以使用Flexbox布局来实现。以下是一个示例的HTML和CSS代码：

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 可视窗口高度 */
}

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: 10px;
}

在上面的示例中，`.container` 是包含两个盒子的父容器，使用Flexbox布局。通过设置 `display: flex;`，`flex-direction: column;` 可以使子元素在垂直方向上排列。然后使用 `justify-content: center;` 和 `align-items: center;` 来使子元素在父容器中居中对齐。通过设置 `.box` 的宽度、高度和样式，可以调整盒子的外观。

这样，两个盒子就会上下对齐且居中显示在父容器中了。你可以根据需要调整样式和尺寸。