【前端攻略】最全面的水平垂直居中方案與flexbox佈局
最近又遇到許多垂直居中的問題，這是Css佈局當中十分常見的一個問題，諸如定長定寬或不定長寬的各種容器的垂直居中，其實都有不少種解決方案。並且在Css3的flexbox出現以後，解決各種居中問題變得更加容易了。搜了搜園子內關於flexbox的文章以爲不少不夠詳盡，故想借介紹flexbox的同時好好總結一番各種垂直居中的方法。由簡至繁：javascript
行內元素的水平居中 css
要實現行內元素（<span>、<a>等）的水平居中，只需把行內元素包裹在塊級父層元素（<div>、<li>、<p>等）中，而且在父層元素CSS設置以下：html
|
1
2
3
|
#container{
text-align
:
center
;
}
|
而且適用於文字，連接，及其inline或者inline-block、inline-table和inline-flex。前端
Demo java
塊狀元素的水平居中 css3
要實現塊狀元素（display:block）的水平居中，咱們只須要將它的左右外邊距margin-left和margin-right設置爲auto，便可實現塊狀元素的居中，要水平居中的塊狀元素CSS設置以下：git
|
1
2
3
|
#
center
{
margin
:
0
auto
;
}
|
Demoweb
多個塊狀元素的水平居中 瀏覽器
要實現多個水平排列的塊狀元素的水平居中，傳統的方法是將要水平排列的塊狀元素設爲display:inline-block，而後在父級元素上設置text-align:center，達到與上面的行內元素的水平居中同樣的效果。微信
|
1
2
3
4
5
6
7
|
#container{
text-align
:
center
;
}
#
center
{
display
:inline-
block
;
}
|
使用flexbox實現多個塊狀元素的水平居中
在使用以前，首先介紹一下flexbox。
Flexbox佈局（Flexible Box)模塊旨在提供一個更加有效的方式制定、調整和分佈一個容器裏的項目佈局，即便他們的大小是未知或者是動態的。是CSS3 中一個新的佈局模式，爲了現代網絡中更爲複雜的網頁需求而設計。
Flexbox 已經被瀏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ，firefox18+已經支持了本文中所描述的 Flexbox。
學會使用flexbox
要爲元素設置flexbox佈局，只需將display屬性值設置爲flex。
|
1
2
3
|
#container {
display
: flex;
}
|
flexbox的默認爲一個塊級元素，若是須要定義爲一個行內級的元素，同理：
|
1
2
3
|
#container {
display
: inline-flex;
}
|
flexbox由伸縮容器和伸縮項目組成。經過設置元素的display屬性爲flex或者inline-flex能夠獲得一個伸縮容器。設置爲flex的容器被渲染爲一個塊級元素，而設置爲inline-flex的容器則渲染爲一個行內元素。而每個被設置爲flex的容器，它的內部元素都將變成一個flex項目，便是一個伸縮項目。簡單的說，flex 定義了伸縮容器內伸縮項目該如何佈局。
回到正題，利用flexbox實現多塊狀元素的水平居中，只須要將父級容器的Css設置以下：
|
1
2
3
4
|
#container{
justify-
content
:
center
;
display
:flex;
}
|
已知高度寬度元素的水平垂直居中
法一 絕對定位與負邊距實現
利用絕對定位，將元素的top和left屬性都設爲50%，再利用margin邊距，將元素回拉它自己高寬的一半，實現垂直居中。核心CSS代碼以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
#container{
position
:
relative
;
}
#
center
{
width
:
100px
;
height
:
100px
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
margin
:
-50px
0
0
-50px
;
}
|
法二 絕對定位與margin
這種方法也是利用絕對定位與margin，可是無需知道被垂直居中元素的高和寬。核心代碼以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
#container{
position
:
relative
;
}
#
center
{
position
:
absolute
;
margin
:
auto
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
}
|
（同上故再也不截圖）
未知高度和寬度元素的水平垂直居中
法一. 當要被居中的元素是inline或者inline-block元素
當要被居中的元素是inline或者inline-block的時候，能夠巧妙的將父級容器設置爲display:table-cell，配合text-align:center和vertical-align:middle便可以實現水平垂直居中。
核心代碼以下：
|
1
2
3
4
5
6
7
8
9
|
#container{
display
:
table-cell
;
text-align
:
center
;
vertical-align
:
middle
;
}
#
center
{
}
|
法二. Css3顯威力
利用Css3的transform，能夠輕鬆的在未知元素的高寬的狀況下實現元素的垂直居中。
核心代碼以下：
|
1
2
3
4
5
6
7
8
9
10
|
#container{
position
:
relative
;
}
#
center
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform: translate(
-50%
,
-50%
);
}
|
法三. flex佈局輕鬆解決
使用flex佈局，無需絕對定位等改變佈局的操做，能夠輕鬆實現元素的水平垂直居中。
核心代碼以下：
|
1
2
3
4
5
6
7
8
9
|
#container{
display
:flex;
justify-
content
:
center
;
align-items:
center
;
}
#
center
{
}
|
總結
CSS3的transform和flex當然好用，但在項目的實際運用中必須考慮兼容問題，大量的hack代碼可能會致使得不償失。
某些瀏覽器仍需使用前綴寫法:
|
1
2
3
4
|
.flexboxtest{
display
: flex;
display
: -webkit-flex; //Safari仍舊須要使用特定的瀏覽器前綴
}
|
瀏覽器對最新版本的flexbox 的支持狀況以下：
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- Opera 17+
- Safari 6.1+ (prefixed with -webkit-)
- Android 4.4+
- iOS 7.1+ (prefixed with -webkit-)
文中介紹的flex用法只是一小部分，flex還有着其餘強大的功能。本文主要介紹水平垂直居中的方法，具體的flex教學，能夠移步：圖解CSS3 Flexbox屬性
原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。