css垂直居中怎么设置flex

CSS中有很多方法可以实现垂直居中，其中一种方法便是使用flex布局。在使用flex布局的时候，只需要设置一个容器的display为flex，再设置其子元素的align-items和justify-content属性为center即可实现垂直居中。

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

上面的代码片段中，首先设置了一个容器的display为flex，这样容器内的子元素就会变成弹性盒子。然后，使用align-items和justify-content属性来分别设置盒子内子元素的纵向和横向对齐方式。当这两个属性设置为center时，子元素就会被居中对齐。

另外，如果希望在一个垂直居中的盒子中，子元素可以从上到下依次排列，可以在子元素上使用flex布局来达到这个效果。

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

在上面的代码中，我们在子元素上使用了display: flex和flex-direction: column来实现从上到下依次排列，同时使用了justify-content: center来使子元素在纵向上保持居中。