flex布局让两个组件分两行，垂直居中怎么写css样式

可以使用flex布局的align-items和justify-content属性来实现两个组件分两行，垂直居中的效果。具体的CSS代码如下：

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

.item1 {
  width: 100%;
}

.item2 {
  width: 100%;
}

上述代码中，使用了flex布局的容器元素为`.container`，其中`align-items: center`和`justify-content: center`属性分别使得子元素在垂直和水平方向上居中对齐。同时，通过`flex-wrap: wrap`属性将子元素分成两行，`.item1`和`.item2`分别表示两个组件，设置宽度为100%使其占据整行。