水平垂直居中那些事 · 我的前端之路

關于水平垂直居中想必大家一定不陌生了，對于前端工程師來說它是基礎中的基礎也是重點中的重點，我在剛剛接觸div+css布局的時候經常因為如何實現水平垂直居中而困擾。下面是我不斷積累和總結出來的常見實現方案。 ### 一、水平居中 #### 1.內聯元素 ~~~ text-align:center; ~~~ #### 2.塊級元素上下外邊距為0，左右外邊距自適應。 ~~~ margin:0 auto; ~~~ ### 二、水平垂直居中 #### 1.寬高固定時通過絕對定位和外邊距來實現。缺點十分明顯，不能自適應。不支持百分比尺寸和min-/max-屬性設置并且當含有內邊距的時候需要一定的計算量。 ~~~ #parent { height:200px; width:200px; background: yellow; position: relative; } #child { height: 100px; width: 100px; background: red; position: absolute; left: 50%; top:50%; margin-left:-50px;/*如果有padding的話就是(width+內邊距)/2*/ margin-top: -50px;/*同上*/ } ~~~ #### 2.改進版當寬高不固定的時候，可以通過css3的transform的translate屬性來進行子層的位置調整。這種方案是上述方案的改進版，但是需要實現兼容各瀏覽器的hack代碼。 ~~~ #parent { height:200px; width:200px; background: yellow; position: relative; } #child { height: 100px; width: 100px; background: red; position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); } ~~~ #### 3.換一種思路既然塊級元素可以通過margin:0 auto來實現水平居中，那可不可以使用margin:auto來實現水平垂直居中呢？當然可以，不過需要先做一些鋪墊。 ~~~ #parent1 { height:200px; width:200px; background: yellow; position: relative; } #child1 { height: 100px; width: 100px; background: red; position: absolute; left: 0; right:0; top:0; bottom:0; margin:auto; } ~~~ 這種方案也是我經常使用的，它支持跨瀏覽器，包括IE8-IE10.無需其他特殊標記，支持百分比%屬性值和min-/max-屬性，完美支持圖片居中。 #### 4.不用絕對定位行不行？強大的table 利用table本身的特性來實現水平垂直居中，總的說來這可能是最好的居中實現方法，因為內容塊高度會隨著實際內容的高度變化，瀏覽器對此的兼容性也好。唯一的美中不足就是需要在父層和子層之間增加一個中間層。 ~~~ #parent { height:200px; width:200px; background: yellow; display: table;/*!!*/ } #middle { display: table-cell;/*!!*/ vertical-align: middle;/*!!*/ } #child { height: 100px; width: 100px; background: red; margin: 0 auto;/*!!*/ } ~~~ #### 5.說個簡單的——文字水平垂直居中假如只有一個層，這個層的高度已知并且這個層中只有文字。那么可以讓文字的行高等于層的高度來實現垂直居中，利用text-align屬性實現水平居中。 ~~~ div { width:200px; height:200px; background:yellow; line-height:200px; text-align:center; } ~~~ #### 6.未來的主流——Flexbox 對于flexbox來說，解決水平垂直居中簡直小菜一碟，它甚至可以用來解決更加復雜的布局問題。但是flexbox的兼容性不是很高，需要大量的hack代碼，而且不支持IE8/IE9。 ~~~ #parent { width:200px; height:200px; background: yellow; display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本語法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語法: IE 10 */ display: -webkit-flex; /* 新版本語法： Chrome 21+ */ display: flex; /* 新版本語法： Opera 12.1, Firefox 22+ */ /*垂直居中*/ /*老版本語法*/ -webkit-box-align: center; -moz-box-align: center; /*混合版本語法*/ -ms-flex-align: center; /*新版本語法*/ -webkit-align-items: center; align-items: center; /*水平居中*/ /*老版本語法*/ -webkit-box-pack: center; -moz-box-pack: center; /*混合版本語法*/ -ms-flex-pack: center; /*新版本語法*/ -webkit-justify-content: center; justify-content: center; } #child { width:100px; height:100px; background: red; } ~~~ #### 7.多個塊級元素的居中將子層（塊級）設置為inline-block，高度和父層一致。可以自適應。 ~~~ #parent { width:500px; height:100px; background: yellow; text-align: center; } #child1,#child2,#child3 { width:100px; height:100px; background: red; display:inline-block; } ~~~