Flex布局如何垂直居中

时间2024-06-17 23:18:03发布访客分类主机资讯浏览1029

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

在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会垂直居中显示在父容器中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！