温馨提示×

Flex布局如何垂直居中

小樊
781
2024-06-17 09:49:55
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:css如何垂直居中

0