html flex column 居中

要将 flex 容器中的项目垂直居中，可以设置 flex 容器的属性 `align-items` 为 `center`，如下所示：

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

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

这样设置后，flex 容器中的项目会在垂直方向上居中显示。

相关问题

display: flex 上下左右居中

要将一个元素在上下左右居中，可以使用`display: flex`以及其他相关属性。下面是一种实现方式：
首先，将外层的div元素设置为flex布局，可以通过设置以下样式来实现：

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

这样就可以实现元素在水平和垂直方向上居中对齐了。
如果需要将子元素在垂直方向上居中，可以设置`flex-direction: column`属性，将元素在纵向上排列，然后使用`align-items: center`将子元素在纵向上居中对齐。
如果需要调整子元素与边界的距离，可以通过设置子元素的`margin-top`或`margin-bottom`属性来实现。例如，可以给下面的子元素设置`margin-top`属性来调整与上边界的距离：

.login-form {
  margin-top: 100px;
}

这样就可以将子元素与上边界保持100像素的距离。

flex布局上下排列居中

在flex布局中，要实现上下排列居中，可以使用以下步骤：

1. 设置父容器的display属性为flex，这样子元素就可以使用flex布局了。
2. 设置父容器的flex-direction属性为column，这样子元素就会垂直排列。
3. 设置父容器的justify-content属性为center，这样子元素就会在垂直方向上居中对齐。

下面是一个示例代码：

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

请注意，以上代码是CSS代码，需要将其应用于HTML中的相应元素或者样式表中。