網上有不少關於Flex的教程，對於Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其實這兩種叫法都沒有錯，只是Flexbox舊一點，而Flex是剛出來不久的東西而已，爲了方便說明，遇上新技術，下面我就把這種佈局叫Flex佈局。html
元素居中，相信做爲前端工程師的你確定會常常用到，無論是在水平方向居中，仍是垂直方向居中，均可在你的職業生涯中徘徊。不過不少時候要實現垂直居中，仍是比較麻煩的。不過你也不用擔憂，下面就給你們分享下經過Flex佈局輕鬆實現元素在水平、垂直方向上的居中效果。前端
水平居中
水平居中最爲簡單咱們直接來看下代碼前端工程師
1.單個元素水平居中佈局
CSS代碼
.box{
display: flex;
justify-content: center;
background: #0099cc
}
h1{
color: #FFF
}
HTML代碼
<div class="box">
<h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
</div>
在這段代碼裏咱們只須要給h1標籤的父元素添加兩個屬性就能夠了，justify-content其做用就是 讓class類爲box的div盒子居中。盒 子居中了，盒子裏面的元素就天然居中了，他的好處就是不須要對需居中的元素（h1）設置任何樣式，若是：width，margin。flex
2.多個h1元素水平居中spa
HTML代碼
<div class="box">
<h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
</div>
CSS代碼
.box{
display: flex;
justify-content: center;
width: 100%;
background: #0099cc
}
h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF;
font-weight: normal;
}
代碼仍是至關的整潔的，在Flex佈局中，做用對象是子元素與及父元素，因此在這裏咱們不妨把body看成一個正常的標籤使用，雖然不多這樣用，可是爲了說明body標籤也是很接地氣的，因此本例中使用了body標籤做爲box的父元素。3d
現 在咱們來分析下代碼，在Flex有兩個東西，一個是Flex容器（子項目父元素），另外一個是子項目（Flex容器子元素）。若是不給.box添加樣式， 一個h1標籤佔一行，也就是頁面會顯示三行文字「flex彈性佈局justify-content屬性實現元素水平居中」。若是咱們給.box添加了 display: flex;那麼三個h1標籤就妥妥地在一行裏排列了，至關於浮動，只不過他不會由於超出了.box的寬度而換行，他老是會在一行內顯示。code
元素垂直居中
元素垂直居中在開端開發中有時候仍是比較麻煩的，可是用了Flex佈局後一切就化繁爲簡！咱們仍是來看看例子吧！orm
1.單個h1標籤垂直居中htm
HTML代碼
<div class="box">
<h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
</div>
CSS代碼
.box{
display: flex;
width: 980px;
height: 30rem;
align-items:center;
background: #0099cc
}
h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF
}
爲了讓你們看得清楚，定義了.box的高，藍色背景；給h1元素添加一個邊框。這樣，h1元素就乖乖地居中了，不用給h1設置高度，無需絕對定位，沒錯就這麼簡單粗暴。
2.多個h1標籤並排垂直居中
HTML代碼
<div class="box">
<h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素水平居中</h1>
</div>
CSS代碼
.box{
display: flex;
width: 980px;
height: 30rem;
align-items:center;
background: #0099cc
}
h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF
}
上面這個例子除了上HTML代碼多了兩個h1標籤，樣式都沒變化。有了Flex垂直居中，元素、圖片、文字居中問題瞬間化爲泡影。
注意：div，h1標籤只是舉例而已，Flex屬性也適用於其它標籤HTML標籤。
若是想父元素水平居中，你只須要給body標籤一個屬性就OK了。代碼以下：
body{
display: flex;
justify-content: center;
}
爲了讓你們看到效果，在這裏咱們把.box的width設置成了960px，背景顏色爲#0099CC。
3.多行h1標籤垂直居中
HTML代碼
<div class="box">
<h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
</div>
CSS代碼
.box{
display: flex;
width: 980px;
height: 30rem;
justify-content:center;
background: #0099cc;
flex-direction:column
}
h1{
display: flex;
justify-content:center;
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF
}
因爲彈性容器.box添加了 display:flex; 屬性，子項目默認是水平排列的，因此給.box追加一個 flex-direction:column 屬性來讓子項目垂直排列。此時垂直方向做爲主軸，因此咱們能夠使用一個 justify-content:center 來讓全部子項目在垂直方向上居中。爲了讓h1標籤內的文字也水平居中，咱們也給了h1一個dislay:flex;以及 justify-content:center，因爲h1是默認的水平排列，因此 justify-content:center 就可讓文字在水平方向上居中。
在這裏咱們只須要注意 justify-content:center 的用法就能夠了，它的做用就是定義Flex項目在主軸方向上的對齊方。你也能夠在這篇文章《CSS3 Flex 彈性佈局用法詳解》瞭解更多。
最後咱們來一個完整的例子，同時包含水平，垂直居中，咱們仍是老規矩，來看看例子
HTML代碼
<div class="box">
<h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
<h1>flex彈性佈局justify-content屬性實現元素垂直居中</h1>
</div>
CSS代碼
body{display: flex;justify-content:center}
.box{
display: flex;
width: 980px;
height: 30rem;
justify-content:center;
background: #0099cc;
flex-direction:column;
align-items:center;
}
h1{
display: flex;
justify-content:center;
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF;
width: 28rem
}
代碼分析：爲了讓h1裏的文字居中，咱們給h1添加了 display:flex; 以及 justify-content:center，一樣的爲了讓h1在.box裏垂直居中，咱們給.box也加上 display:flex; 以及 justify-content:center 屬性。而.box裏的align-items:center就 是讓h1水平居中的。這個屬性的做用是：定義項目在交叉軸上的對齊方式。因爲咱們使用了 flex-direction:column; 因此垂直方向做爲主軸，交叉軸天然就是水平方向了。爲讓讓.box也水平居中，咱們同時也定義了body{display:flex;justify- content:center}
PS：代碼真實效果與圖片顯示效果可能會不同，由於貼出的代碼是最簡的，給代碼配圖時，爲了達到圖片演示效果，因此對代碼稍做了修飾。
轉自：http://www.myexception.cn/flex/2025243.html