轉載：[轉載自這里](https://blog.csdn.net/amberqu/article/details/79700974)

轉

Flex實現元素的水平居中和垂直居中

2018年03月26日 17:20:41 AmberQu 閱讀數 16299

flex容器內子元素的float、clear和vertical-align屬性將失效，所有子元素自動成為容器成員flex item，即“項目”。

水平居中

justify-content屬性定義了項目在主軸（水平）上的對齊方式。

justify-content可取值：

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

總結

以上是生活随笔為你收集整理的flex布局实现元素的垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

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