Flex布局如何垂直居中

在Flex布局中，可以通过设置父容器的align-items属性来实现子元素的垂直居中对齐。具体来说，可以将align-items属性设置为center，这样子元素就会在父容器的垂直中心位置对齐。示例如下：

.container {   display: flex;   align-items: center;   height: 200px; }  .child {   width: 100px;   height: 50px; } 

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

在上面的示例中，父容器的高度为200px，并且设置了align-items: center;子元素child会垂直居中显示在父容器中。