場景

Flex是Flexible Box的縮寫，意為”彈性布局”。

怎樣使用彈性布局實現頁面上下兩個元素上下左右垂直居中排列。

實現如下類似布局

?

最外層是是一個div,div里面是上面一個照片，下面一個表單，這兩個元素居中排列。

注：

博客：
霸道流氓氣質的博客_CSDN博客-C#,架構之路,SpringBoot領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、外層div設置樣式

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

2、display: flex; 設置為彈性布局

3、flex-direction屬性決定主軸的方向（即項目的排列方向）。

row（默認值）：主軸為水平方向，起點在左端。 row-reverse：主軸為水平方向，起點在右端。 column：主軸為垂直方向，起點在上沿。 column-reverse：主軸為垂直方向，起點在下沿。

4、justify-content屬性定義了項目在主軸上的對齊方式。

flex-start（默認值）：左對齊 flex-end：右對齊 center： 居中 space-between：兩端對齊，項目之間的間隔都相等。 space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

5、align-items屬性定義項目在交叉軸上如何對齊。

flex-start：交叉軸的起點對齊。 flex-end：交叉軸的終點對齊。 center：交叉軸的中點對齊。 baseline: 項目的第一行文字的基線對齊。 stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

6、這樣設置之后div里面上下兩個元素就會居中

但是兩個子元素會緊挨在一起，如果要使其有一定距離。

給下面的子元素設置margin-top屬性即可

.login-form {margin-top: 100px; }

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。