溫馨提示×

Flex布局如何垂直居中

小樊
803
2024-06-17 09:49:55
欄目: 編程語言

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

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女