網(wǎng)上有很多關(guān)于Flex的教程，對(duì)于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其實(shí)這兩種叫法都沒(méi)有錯(cuò)，只是Flexbox舊一點(diǎn)，而Flex是剛出來(lái)不久的東西而已，為了方便說(shuō)明，趕上新技術(shù)，下面我就把這種布局叫Flex布局。

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

水平居中

水平居中最為簡(jiǎn)單我們直接來(lái)看下代碼

1.單個(gè)元素水平居中

CSS3 Flexbox輕松實(shí)現(xiàn)元素的水平居中和垂直居中

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屬性實(shí)現(xiàn)元素水平居中

3

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。