css 垂直排列布局

好的，以下是几种常见的CSS垂直排列布局方式：

### 1. 使用flex布局

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

以上代码中，我们使用`flex`布局将子元素垂直排列，设置`flex-direction`属性为`column`，表示主轴方向为垂直方向，同时使用`justify-content: center`和`align-items: center`将子元素在垂直和水平方向上居中对齐。

### 2. 使用grid布局

.container {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  place-items: center;
}

以上代码中，我们使用`grid`布局将子元素垂直排列，使用`grid-template-rows`属性设置每个子元素的高度为`100px`，同时使用`repeat(auto-fit, minmax(100px, 1fr))`将子元素的行高自适应，`1fr`表示剩余空间平分给每个子元素。最后使用`place-items: center`将子元素在垂直和水平方向上居中对齐。

### 3. 使用table布局

.container {
  display: table;
}

.item {
  display: table-row;
}

以上代码中，我们使用`table`布局将子元素垂直排列，使用`display: table-row`将每个子元素设置为一行。由于`table`布局默认会将子元素在垂直方向上居中对齐，所以这种方式可以很方便地实现垂直排列布局。