網上有很多關于Flex的教程，對于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其實這兩種叫法都沒有錯，只是Flexbox舊一點，而Flex是剛出來不久的東西而已，為了方便說明，趕上新技術，下面我就把這種布局叫Flex布局。

元素居中，相信作為前端工程師的你肯定會經常用到，不管是在水平方向居中，還是垂直方向居中，都可在你的職業生涯中徘徊。不過很多時候要實現垂直居中，還是比較麻煩的。不過你也不用擔心，下面就給大家分享下通過Flex布局輕松實現元素在水平、垂直方向上的居中效果。

水平居中

水平居中最為簡單我們直接來看下代碼

1.單個元素水平居中

CSS3 Flexbox輕松實現元素的水平居中和垂直居中

CSS代碼

1

.box{

2

display: flex;

3

justify-content:center;

4

background:#0099cc

5

}

6

h1{

7

color:#FFF

8

}

HTML代碼

1

2

flex彈性布局justify-content屬性實現元素水平居中

3

總結

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

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