當(dāng)前位置：
首頁(yè) >
CSS居中学习总结
發(fā)布時(shí)間：2025/4/14
48
豆豆
div居中代碼 DIV水平居中顯示CSS代碼
http://www.divcss5.com/rumen/r622.shtml如何使用CSS讓DIV居中顯示，讓div水平居中有哪些CSS樣式呢？
需要的主要css代碼有兩個(gè)，一個(gè)為text-align:center（內(nèi)容居中），另外一個(gè)為margin:0 auto；其兩個(gè)樣式需要配合使用才能實(shí)現(xiàn)div盒子的居中顯示排版。
首先我們對(duì)body設(shè)置text-align:center，再對(duì)需要居中的div盒子設(shè)置css樣式margin:0 auto，這樣即可讓對(duì)應(yīng)div水平居中。
實(shí)例講解div居中代碼應(yīng)用，為了觀察div居中效果，我們對(duì)div設(shè)置一個(gè)div命名為“.div”在html中div標(biāo)簽內(nèi)使用class=“div”,設(shè)置其寬度為400px;高度為100px，邊框?yàn)榧t色。以便我們觀察效果。
1、完整html+css代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div居中 在線演示 www.divcss5.com</title> <style> body{ text-align:center} .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} /* css注釋：為了觀察效果設(shè)置寬度 邊框 高度等樣式 */ </style> </head> <body> <div class="div"> DIVCSS5實(shí)例 </div> </body> </html>
2、div+css居中實(shí)例截圖
div css實(shí)現(xiàn)居中效果截圖
div實(shí)現(xiàn)居中效果截圖
3、div居中代碼應(yīng)用特點(diǎn)
此居中方法是讓div居中效果完美兼容各大平臺(tái)、兼容各大瀏覽器，無(wú)論高版本ie還是高版本的ie均兼容。
4、在線演示：查看案例
5、打包下載：
立即下載 （1KB）
6、居中相關(guān)CSS教程
1）、div居中
2）、css字體居中
3）、div圖片居中
4）、css垂直居中
5）、css背景居中
6）、div內(nèi)容居中
7）、div align center
8）、ie9不能垂直居中
9）、css居中
========
CSS text-align圖片文字內(nèi)容居左 居右 居中
http://www.divcss5.com/rumen/r350.shtmlCSS text-align之CSS居中（text-align:center）、CSS內(nèi)容居左(text-align:left)、CSS文字居右(text-align:right)樣式屬性篇，圖片、文字內(nèi)容對(duì)齊 居中 居左 居右篇
CSS text-align目錄
text-align語(yǔ)法
text-align常使用地方
DIV CSS text-align實(shí)例
text-align樣式屬性總結(jié)
一、text-align樣式語(yǔ)法
1、text-align的值與說(shuō)明：
text-align語(yǔ)法：
text-align : left | right | center | justify?
text-align參數(shù)值與說(shuō)明：?
left : 左對(duì)齊
right : 右對(duì)齊
center : 居中
*justify : 兩端對(duì)齊（不推薦使用，通常大部分瀏覽器不使用）
我們對(duì)text-align常用的參數(shù)值為left、right、center
text-align功能說(shuō)明：
設(shè)置或檢索對(duì)象中文本的左中右對(duì)齊方式。
2、使用范例與使用語(yǔ)法
div{ text-align:left } div標(biāo)簽對(duì)象內(nèi)內(nèi)容（圖片和文字等）將靠左對(duì)齊
div{ text-align:right} div標(biāo)簽內(nèi)內(nèi)容（圖片和文字等）將靠右對(duì)齊
div{ text-align:center } div標(biāo)簽內(nèi)內(nèi)容（圖片和文字等）將居中對(duì)齊
二、text-align常使用地方 ? - ? TOP
text-align常常用于盒子里的文字、圖片等內(nèi)容居左、居中、局右。比較常見是常規(guī)的讓內(nèi)容局左或居中對(duì)齊排列。
CSS text-align樣式應(yīng)用舉例
text-align舉例截圖
三、text-align實(shí)例
我們?cè)O(shè)置3個(gè)盒子，分別都設(shè)置盒子CSS高度、CSS寬度相同，再分別設(shè)置三個(gè)盒子里內(nèi)容靠左對(duì)齊、居中對(duì)齊、靠右對(duì)齊。
我們都設(shè)置3個(gè)盒子高度為50px；寬度為300px；便于觀察我們?cè)O(shè)置3個(gè)盒子都1個(gè)黑色邊框樣式。
1、HTML+CSS代碼
1）、CSS代碼
.div1{ width:300px; height:50px; border:1px solid #000; text-align:left}?
.div2{ width:300px; height:50px; border:1px solid #000; text-align:center}?
.div3{ width:300px; height:50px; border:1px solid #000; text-align:right}?
/* ?
div1 div2 div3 分別設(shè)置 靠左 居中 靠右對(duì)齊?
www.divcss5.com?
*/?
2）、HTML代碼
<div class="div1">我被靠左對(duì)齊</div>?
<div class="div2">我被居中顯示</div>?
<div class="div3">我被靠右對(duì)齊</div>?
2、案例截圖
DIV+CSS text-align內(nèi)容居中、內(nèi)容居左、內(nèi)容居右案例截圖
內(nèi)容居左、內(nèi)容居中、內(nèi)容局右演示案例截圖
通過(guò)DIV CSS設(shè)置text-align left、text-align right、text-align center對(duì)齊方式實(shí)現(xiàn)居左對(duì)齊、居右對(duì)齊、居中對(duì)齊樣式效果。希望大家通過(guò)基礎(chǔ)和實(shí)例掌握CSS text-align樣式。
四、text-align樣式屬性總結(jié) ? - ? TOP
CSS居中，通常我們對(duì)對(duì)象設(shè)置text-align:center居中樣式即可實(shí)現(xiàn)。而平時(shí)我們的文章內(nèi)容均居左text-align:left，大家要記住我們所到內(nèi)容居左、居右、居中要知道使用text-align樣式屬性即可實(shí)現(xiàn)。
通常我們讓圖片、文字內(nèi)容居左靠左對(duì)齊、居中對(duì)齊、居右靠右對(duì)齊顯示，我們使用text-align屬性單詞即可實(shí)現(xiàn)對(duì)象內(nèi)內(nèi)容根據(jù)需求對(duì)齊。text-align:left 內(nèi)容靠左居左對(duì)齊；text-align:right內(nèi)容靠右居右對(duì)齊；text-align:center內(nèi)容居中對(duì)齊。
如果需要內(nèi)容上下垂直居中使用css line-height屬性樣式。了解line-height可進(jìn)入css line-height教程：http://www.divcss5.com/rumen/r363.shtml
擴(kuò)展閱讀
1、布局居中
2、布局居右
3、布局局左
4、CSS垂直居中
========
DIV+CSS居中布局條件與CSS布局居中代碼
http://www.divcss5.com/jiqiao/j482.shtml一、讓DIV+CSS網(wǎng)頁(yè)布局居中分析介紹 ? - ? TOP
一般網(wǎng)頁(yè)主體內(nèi)容布局均為居中于瀏覽器。如DIVCSS5首頁(yè)（http://www.divcss5.com/），主體為居中布局。
網(wǎng)頁(yè)布局居中實(shí)際運(yùn)用截圖
網(wǎng)頁(yè)布局居中演示截圖
如何使用CSS讓整個(gè)網(wǎng)頁(yè)布局居中呢？布局居中條件是什么呢？
首先我們要對(duì)body設(shè)置css內(nèi)容居中樣式（css text-align:center），然后布局最外層DIV盒子時(shí)候使用 margin:0 auto即可讓對(duì)象布局居中。
當(dāng)然我們對(duì)盒子對(duì)象使用了 margin:0 auto，有的瀏覽器不對(duì)body對(duì)象加text-align:center樣式，布局仍然是居中的，這是因?yàn)椴煌瑸g覽器默認(rèn)樣式不同造成，如果不對(duì)body設(shè)置text-align:center，這樣會(huì)造成有的瀏覽器布局居中，有的靠左，這樣布局的兼容就產(chǎn)生了。
解釋：margin:0 auto，意思是讓對(duì)象上下間隔為0，左右間隔自動(dòng)，隨對(duì)象寬度左右間隔自動(dòng)，擴(kuò)展了解css margin
二、小結(jié)DIV CSS網(wǎng)頁(yè)布局居中條件 ? - ? TOP
1、對(duì)body設(shè)置CSS內(nèi)容居中樣式text-align:center，代碼：body{text-align:center}
2、對(duì)最外層對(duì)象設(shè)置margin:0 auto樣式，代碼：.divcss5{margin:0 auto}
三、網(wǎng)頁(yè)布局居中實(shí)例 ? - ? TOP
為了觀察到布局居中效果，我們CSS命名對(duì)象為".divcss5",設(shè)置CSS邊框?yàn)楹谏?#xff0c;css寬度為400px，css高度為100px。
1、css代碼如下：
<style>?
body{text-align:center}?
.divcss5{margin:0 auto;width:400px;height:100px;border:1px solid #000}?
/* CSS注釋：設(shè)置對(duì)象邊框、寬度、高度 便于觀察布局效果 */?
</style>?
2、HTML代碼片段：
<div class="divcss5">對(duì)象DIVCSS5布局居中了</div>?
3、布局居中效果截圖
CSS網(wǎng)頁(yè)布局居中用法案例截圖
居中案例效果截圖
4、在線樣式
http://www.divcss5.com/yanshi/2013041801.html
四、居中總結(jié) ? - ? TOP
對(duì)象內(nèi)內(nèi)容居中為用text-align樣式，布局居中我們還要用到margin樣式，希望大家拷貝代碼實(shí)踐，幾乎每次新制作CSS項(xiàng)目時(shí)候，我們都需要對(duì)對(duì)象布局居中做好條件。所以DIVCSS5為大家整理一套每次開發(fā)CSS項(xiàng)目時(shí)候都可以使用的最基礎(chǔ)CSS+HTML模板（了解與下載DIV+CSS初始化模板）。
擴(kuò)展知識(shí)：
1、css內(nèi)容居中 背景圖片居中
2、css line-height行高垂直居中
3、為什么CSS初始化
========
如何只用CSS做到完全居中
http://blog.jobbole.com/46574/【感謝@埃姆杰 的熱心翻譯。如果其他朋友也有不錯(cuò)的原創(chuàng)或譯文，可以嘗試提交到伯樂(lè)在線。】
我們都知道 margin:0 auto; 的樣式能讓元素水平居中，而 margin: auto; 卻不能做到垂直居中……直到現(xiàn)在。但是，請(qǐng)注意！想讓元素絕對(duì)居中，只需要聲明元素高度，并且附加以下樣式，就可以做到：
CSS
.Absolute-Center {
? margin: auto;
? position: absolute;
? top: 0; left: 0; bottom: 0; right: 0;
}
.Absolute-Center {
? margin: auto;
? position: absolute;
? top: 0; left: 0; bottom: 0; right: 0;
}
我并不是第一個(gè)發(fā)現(xiàn)這種方法的人（不過(guò)我還是敢把它叫做“完全居中”），它有可能是種非常普遍的技巧。但大多數(shù)介紹垂直居中的文章中并沒有提到過(guò)這種方法。如果不是瀏覽這篇文章的評(píng)論，我甚至根本就不會(huì)發(fā)現(xiàn)這個(gè)辦法。
上面那篇文章的評(píng)論欄中，Simon提供了一個(gè)jsFiddle的鏈接，其他的方法相比之下就相形見絀了。（Priit也在評(píng)論欄中提到了同樣的方法）。深入研究了一番之后，我又用某些關(guān)鍵詞找到了記載這種方法的三個(gè)網(wǎng)站：站點(diǎn)一、站點(diǎn)二、站點(diǎn)三。
以前從未用過(guò)這種方法的我想試試，看看這種”完全居中”的方法到底有多么神奇。 好處：
跨瀏覽器，兼容性好（無(wú)需hack，可兼顧IE8~IE10）
無(wú)特殊標(biāo)記，樣式更精簡(jiǎn)
自適應(yīng)布局，可以使用百分比和最大最小高寬等樣式
居中時(shí)不考慮元素的padding值（也不需要使用box-sizing樣式）
布局塊可以自由調(diào)節(jié)大小
img的圖像也可以使用
同時(shí)注意：
必須聲明元素高度
推薦設(shè)置overflow:auto;樣式避免元素溢出，顯示不正常的問(wèn)題
這種方法在Windows Phone上不起作用
瀏覽器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”經(jīng)測(cè)試可以完美地應(yīng)用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以運(yùn)行在IE8~IE10上
對(duì)照表
“完全居中”并不是本篇文章中唯一的選項(xiàng)。要做到垂直居中，還存在著其他方法，各有各的長(zhǎng)處。采取什么樣的方法，取決于你所支持的瀏覽器，以及現(xiàn)有標(biāo)簽的結(jié)構(gòu)。下面這張對(duì)照表能夠幫你選出最符合你需要的方法。
所用樣式
支持的瀏覽器
是否 響應(yīng)式
內(nèi)容溢出后的樣式
resize:both
高度可變
主要缺陷
Absolute
現(xiàn)代瀏覽器&IE8+
是
會(huì)導(dǎo)致容器溢出
是
是*
‘可變高度’的特性不能跨瀏覽器
負(fù)margin值
所有
否
帶滾動(dòng)條
大小改變后不再居中
否
不具有響應(yīng)式特性，margin值必須經(jīng)過(guò)手工計(jì)算
Transform
現(xiàn)代瀏覽器&IE9+
是
會(huì)導(dǎo)致容器溢出
是
是
妨礙渲染
Table-Cell
現(xiàn)代瀏覽器&IE8+
是
撐開容器
否
是
會(huì)加上多余的標(biāo)記
Inline-Block
現(xiàn)代瀏覽器&IE8+&IE7*
是
撐開容器
否
是
需要使用容器包裹和hack式的樣式
Flexbox
現(xiàn)代瀏覽器&IE10+
是
會(huì)導(dǎo)致容器溢出
是
是
需要使用容器包裹和廠商前綴（vendor prefix）
說(shuō)明
在研究了規(guī)范和文檔后，我總結(jié)出了“完全居中”的工作原理：
在普通文檔流里，margin: auto; 的意思是設(shè)置元素的margin-top和margin-bottom為0。
W3.org:?If ‘margin-top’, or ‘margin-bottom’ are ‘a(chǎn)uto’, their used value is 0.
2. 設(shè)置了position: absolute; 的元素會(huì)變成塊元素，并脫離普通文檔流。而文檔的其余部分照常渲染，元素像是不在原來(lái)的位置一樣。 Developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space
3. 設(shè)置了top: 0; left: 0; bottom: 0; right: 0; 樣式的塊元素會(huì)讓瀏覽器為它包裹一層新的盒子，因此這個(gè)元素會(huì)填滿它相對(duì)父元素的內(nèi)部空間，這個(gè)相對(duì)父元素可以是是body標(biāo)簽，或者是一個(gè)設(shè)置了position: relative; 樣式的容器。 Developer.mozilla.org:?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).
4. 給元素設(shè)置了寬高以后，瀏覽器會(huì)阻止元素填滿所有的空間，根據(jù)margin: auto; 的要求，重新計(jì)算，并包裹一層新的盒子。 Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.
5. 既然塊元素是絕對(duì)定位的，又脫離了普通文檔流，因此瀏覽器在包裹盒子之前會(huì)給margin-top和margin-bottom設(shè)置一個(gè)相等的值。 W3.org:?If none of the three [top, bottom, height] are ‘a(chǎn)uto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘a(chǎn)uto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically
使用“完全居中”，有意遵照了標(biāo)準(zhǔn)margin: auto; 樣式渲染的規(guī)定，所以應(yīng)當(dāng)在與標(biāo)準(zhǔn)兼容的各種瀏覽器中起作用。
對(duì)齊
容器內(nèi)對(duì)齊
使用“完全居中”，就可以在一個(gè)設(shè)置了position: relative的容器中做到完全居中元素了！ （居中例子，請(qǐng)前往英文原文查看）
CSS
.Center-Container {
? position: relative;
}
.Absolute-Center {
? width: 50%;
? height: 50%;
? overflow: auto;
? margin: auto;
? position: absolute;
? top: 0; left: 0; bottom: 0; right: 0;
}
.Center-Container {
? position: relative;
}
?
.Absolute-Center {
? width: 50%;
? height: 50%;
? overflow: auto;
? margin: auto;
? position: absolute;
? top: 0; left: 0; bottom: 0; right: 0;
}
接下來(lái)的示例會(huì)假設(shè)已經(jīng)包含了以下樣式，并且以逐步添加樣式的方式提供不同的特性。
在可視區(qū)域內(nèi)居中
想要使內(nèi)容區(qū)在可視區(qū)域內(nèi)居中么？設(shè)置position: fixed樣式，并設(shè)置一個(gè)較高的z-index值，就可以做到。
CSS
.Absolute-Center.is-Fixed {
? position: fixed;
? z-index: 999;
}
.Absolute-Center.is-Fixed {
? position: fixed;
? z-index: 999;
}
移動(dòng)版Safari的說(shuō)明：如果外面沒有一層設(shè)置position: relative的容器，內(nèi)容區(qū)會(huì)以整個(gè)文檔的高度的中心點(diǎn)為基準(zhǔn)居中，而不是以可視區(qū)域的高度中心點(diǎn)為基準(zhǔn)居中。
偏移值
如果需要添加固定的標(biāo)題，或者其他帶偏移樣式的元素，可以直接把類似top: 70px; 的樣式寫進(jìn)內(nèi)容區(qū)域的樣式中。一旦聲明了margin: auto; 的樣式，內(nèi)容塊的top left bottom right的屬性值也會(huì)同時(shí)計(jì)算進(jìn)去。
如果想讓內(nèi)容塊在貼近側(cè)邊的過(guò)程中保持水平居中，可以使用right: 0; left: auto; 讓內(nèi)容貼在右側(cè)，或者使用left: 0; right: auto; 使內(nèi)容貼在左側(cè)。
CSS
.Absolute-Center.is-Fixed {
? position: fixed;
? z-index: 999;
}
.Absolute-Center.is-Fixed {
? position: fixed;
? z-index: 999;
}
帶響應(yīng)式
使用absolute的最大好處就是可以完美地使用帶百分比的寬高樣式！就算是min-width/max-width或者min-height/max-height也能夠有如預(yù)期般的表現(xiàn)。
再進(jìn)一步加上padding樣式的話，absolute式的完全居中也絲毫不會(huì)破壞！
CSS
.Absolute-Center.is-Responsive {
? width: 60%;?
? height: 60%;
? min-width: 200px;
? max-width: 400px;
? padding: 40px;
}
.Absolute-Center.is-Responsive {
? width: 60%;?
? height: 60%;
? min-width: 200px;
? max-width: 400px;
? padding: 40px;
}
帶溢出內(nèi)容
內(nèi)容區(qū)高度大于可視區(qū)域或者一個(gè)position: relative的容器，其內(nèi)容可能會(huì)溢出容器，或被容器截?cái)唷Ｖ灰獌?nèi)容區(qū)域沒有超出容器（沒有給內(nèi)容容器預(yù)留padding的話，可以設(shè)置max-height: 100%;的樣式），那么容器內(nèi)就會(huì)產(chǎn)生滾動(dòng)條。
CSS
.Absolute-Center.is-Overflow {
? overflow: auto;
}
.Absolute-Center.is-Overflow {
? overflow: auto;
}
大小可調(diào)整
使用其他樣式，或者使用JavaScript調(diào)整內(nèi)容區(qū)的大小，也是不用手動(dòng)重新計(jì)算的！如果設(shè)置了resize的樣式，甚至可以讓用戶自行調(diào)節(jié)內(nèi)容區(qū)域的大小。 “完全居中”法，無(wú)論內(nèi)容區(qū)怎么改變大小，都會(huì)保持居中。
設(shè)置了min-/max- 開頭的屬性可以限制區(qū)塊的大小而不用擔(dān)心撐開容器。
CSS
.Absolute-Center.is-Resizable {
? min-width: 20%;
? max-width: 80%;
? min-height: 20%;
? max-height: 80%;
? resize: both;
? overflow: auto;
}
.Absolute-Center.is-Resizable {
? min-width: 20%;
? max-width: 80%;
? min-height: 20%;
? max-height: 80%;
? resize: both;
? overflow: auto;
}
如果不設(shè)置resize: both的樣式，可以設(shè)置transition樣式平滑地在大小間切換。一定要記得設(shè)置overflow: auto樣式，因?yàn)楦淖兇笮『蟮娜萜鞲邔捄苡锌赡軙?huì)小于內(nèi)容的高寬。 “完全居中”法是唯一一種能支持使用resize: both樣式的方法。
使用注意：
需要設(shè)置max-width/max-height給內(nèi)容區(qū)域留足夠的空間，不然就有可能使容器溢出。
resize屬性不支持移動(dòng)版瀏覽器和IE8-10，如果用戶體驗(yàn)很重要的話，請(qǐng)確保用戶可以有其他替代方法來(lái)改變大小。
同時(shí)使用resize樣式和transition會(huì)使用戶在開始改變大小時(shí)產(chǎn)生等于transition效果時(shí)間等長(zhǎng)的延時(shí)。
?
圖像
圖像也同樣有效！提供相應(yīng)的class，并指定樣式 height: auto; ，就得到了一張隨著容器改變大小的響應(yīng)式圖片。
請(qǐng)注意，height: auto; 樣式雖然對(duì)圖片有效，如果沒有用到了后面介紹的‘可變高技巧’，則會(huì)導(dǎo)致普通內(nèi)容區(qū)域伸長(zhǎng)以適應(yīng)容器長(zhǎng)度。
瀏覽器很有可能是根據(jù)渲染結(jié)果填充了圖像高度值，所以在測(cè)試過(guò)的瀏覽器中，margin: auto; 樣式就像是聲明了固定的高度值一般正常工作。
HTML:
XHTML
<img src="http://placekitten.com/g/500/200" alt="" />
1
<img src="http://placekitten.com/g/500/200" alt="" />
CSS:
CSS
.Absolute-Center.is-Image {
? height: auto;
}
.Absolute-Center.is-Image img {?
? width: 100%;
? height: auto;
}
1
2
3
4
5
6
7
8
.Absolute-Center.is-Image {
? height: auto;
}
?
.Absolute-Center.is-Image img {?
? width: 100%;
? height: auto;
}
?
可變高度
“完全居中”法的確需要聲明容器高度，但是高度受max-height樣式的影響，也可以是百分比。這非常適合響應(yīng)式的方案，只需要設(shè)置好帶溢出內(nèi)容就行。
另一種替代方案是設(shè)置display: table樣式居中，，不管內(nèi)容的長(zhǎng)度。這種方法會(huì)在一些瀏覽器中產(chǎn)生問(wèn)題（主要是IE和Firefox）。我在ELL Creative的朋友Kalley寫了一個(gè)基于Modernizr 的測(cè)試，可以用來(lái)檢查瀏覽器是否支持這種居中方案。現(xiàn)在這種方法可以做到漸進(jìn)增強(qiáng)。
注意要點(diǎn)： 這種方法會(huì)破壞瀏覽器兼容性，如果Modernizr測(cè)試不能滿足你的需求，你可能需要考慮其他的實(shí)現(xiàn)方案。
與大小可調(diào)整技術(shù)是不兼容的
Firefox/IE8中使用display: table，內(nèi)容區(qū)在垂直方向靠上，水平方向仍然居中。
IE9/10中使用display: table，內(nèi)容區(qū)會(huì)跑到左上角。
移動(dòng)版Safari中內(nèi)容區(qū)是水平對(duì)齊的，但是如果使用了百分比的寬度，水平方向上會(huì)稍稍偏離中心。
Javascript:
CSS
/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
? Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});
1
2
3
4
/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
? Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});
CSS:
CSS
.absolutecentercontent .Absolute-Center.is-Variable {
? display: table;
? height: auto;
}
1
2
3
4
.absolutecentercontent .Absolute-Center.is-Variable {
? display: table;
? height: auto;
}
?
其他方法
“完全居中”法是解決居中問(wèn)題的好方法，同時(shí)也有許多可以滿足不同需求的其他方法。最常見的，推薦的方法有負(fù)margin值、transform法、table-cell法、inline-block法、以及現(xiàn)在出現(xiàn)的Flexbox法，這些方法其他文章都有深入介紹，所以這里只會(huì)稍稍提及。
?
負(fù)margin值
這或許是最常用的方法。如果知道了各個(gè)元素的大小，設(shè)置等于寬高一半大小的負(fù)margin值（如果沒有使用box-sizing: border-box樣式，還需要加上padding值），再配合top: 50%; left: 50%;樣式就會(huì)使塊元素居中。
需要注意的是，這是按照預(yù)想情況也能在工作在IE6-7下的唯一方法。
CSS
.is-Negative {
? ? ? ? width: 300px;
? ? ? ? height: 200px;
? ? ? ? padding: 20px;
? ? ? ? position: absolute;
? ? ? ? top: 50%; left: 50%;
? ? ? ? margin-left: -170px; /* (width + padding)/2 */
? ? ? ? margin-top: -120px; /* (height + padding)/2 */
}
1
2
3
4
5
6
7
8
9
.is-Negative {
? ? ? ? width: 300px;
? ? ? ? height: 200px;
? ? ? ? padding: 20px;
? ? ? ? position: absolute;
? ? ? ? top: 50%; left: 50%;
? ? ? ? margin-left: -170px; /* (width + padding)/2 */
? ? ? ? margin-top: -120px; /* (height + padding)/2 */
}
好處：
瀏覽器兼容性非常好，甚至支持IE6-7
需要的編碼量很少
同時(shí)注意：
這是個(gè)非響應(yīng)式的方法，不能使用百分比的大小，也不能設(shè)置min-/max-的最大值最小值。
內(nèi)容可能會(huì)超出容器
需要為padding預(yù)留空間，或者需要使用box-sizing: border-box樣式。
?
transform法
和“完全居中”法的好處一樣，簡(jiǎn)單有效，同時(shí)支持可變高度。為內(nèi)容指定帶有廠商前綴的transform: translate(-50%,-50%)和top: 50%; left: 50%;樣式就可以讓內(nèi)容塊居中。
CSS
.is-Transformed {?
? width: 50%;
? margin: auto;
? position: absolute;
? top: 50%; left: 50%;
? -webkit-transform: translate(-50%,-50%);
? ? ? -ms-transform: translate(-50%,-50%);
? ? ? ? ? transform: translate(-50%,-50%);
}
1
2
3
4
5
6
7
8
9
.is-Transformed {?
? width: 50%;
? margin: auto;
? position: absolute;
? top: 50%; left: 50%;
? -webkit-transform: translate(-50%,-50%);
? ? ? -ms-transform: translate(-50%,-50%);
? ? ? ? ? transform: translate(-50%,-50%);
}
好處：
內(nèi)容高度可變
代碼量小
同時(shí)注意：
不支持IE8
需要寫廠商前綴
會(huì)和其他transform樣式有沖突
某些情況下的邊緣和字體渲染會(huì)有問(wèn)題
?
table-cell法
這種可能是最好的方法，因?yàn)楦叨瓤梢噪S內(nèi)容改變，瀏覽器支持也不差。主要缺陷是會(huì)產(chǎn)生額外的標(biāo)簽，每一個(gè)需要居中的元素需要三個(gè)額外的HTML標(biāo)簽。
HTML:
CSS
<div class="Center-Container is-Table">
? <div class="Table-Cell">
? ? <div class="Center-Block">
? ? <!-- CONTENT -->
? ? </div>
? </div>
</div>
1
2
3
4
5
6
7
<div class="Center-Container is-Table">
? <div class="Table-Cell">
? ? <div class="Center-Block">
? ? <!-- CONTENT -->
? ? </div>
? </div>
</div>
CSS:
CSS
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
? display: table-cell;
? vertical-align: middle;
}
.is-Table .Center-Block {
? width: 50%;
? margin: 0 auto;
}
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
? display: table-cell;
? vertical-align: middle;
}
.is-Table .Center-Block {
? width: 50%;
? margin: 0 auto;
}
好處：
內(nèi)容高度可變
內(nèi)容溢出則能自動(dòng)撐開父元素高度
瀏覽器兼容性好
同時(shí)注意：
需要額外的HTML標(biāo)簽
inline-block法
迫切需要的方法：inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle樣式和偽元素讓內(nèi)容塊在容器中居中。我的實(shí)現(xiàn)用到了幾個(gè)在其他地方見不到的新技巧解決了一些問(wèn)題。
內(nèi)容區(qū)聲明的寬度不能大于容器的100% 減去0.25em的寬度。就像一段帶有長(zhǎng)文本的區(qū)域。不然，內(nèi)容區(qū)域會(huì)被推到頂端，這就是使用:after偽類的原因。使用:before偽類則會(huì)讓元素有100%的大小！
如果內(nèi)容塊需要盡可能大地占用水平空間，可以為大容器加上max-width: 99%;樣式，或者考慮瀏覽器和容器寬度的情況下使用max-width: calc(100% – 0.25em) 樣式。
這種方法和table-cell的大多數(shù)好處相同，不過(guò)最初我放棄了這個(gè)方法，因?yàn)樗袷莌ack。不管這一點(diǎn)的話，瀏覽器支持很不錯(cuò)，而且也被證實(shí)是很流行的方法。
HTML:
XHTML
<div class="Center-Container is-Inline">
? <div class="Center-Block">
? ? <!-- CONTENT -->
? </div>
</div>
1
2
3
4
5
<div class="Center-Container is-Inline">
? <div class="Center-Block">
? ? <!-- CONTENT -->
? </div>
</div>
CSS:
CSS
.Center-Container.is-Inline {?
? text-align: center;
? overflow: auto;
}
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
? display: inline-block;
? vertical-align: middle;
}
.Center-Container.is-Inline:after {
? content: '';
? height: 100%;
? margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
? max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
? /* max-width: calc(100% - 0.25em) /* Only for IE9+ */?
}
.Center-Container.is-Inline {?
? text-align: center;
? overflow: auto;
}
?
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
? display: inline-block;
? vertical-align: middle;
}
?
.Center-Container.is-Inline:after {
? content: '';
? height: 100%;
? margin-left: -0.25em; /* To offset spacing. May vary by font */
}
?
.is-Inline .Center-Block {
? max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
? /* max-width: calc(100% - 0.25em) /* Only for IE9+ */?
}
好處：
內(nèi)容高度可變
內(nèi)容溢出則能自動(dòng)撐開父元素高度
瀏覽器兼容性好，甚至可以調(diào)整支持IE7
同時(shí)注意：
需要額外容器
依賴于margin-left: -0.25em的樣式，做到水平居中，需要為不同的字體大小作調(diào)整
內(nèi)容區(qū)聲明的寬度不能大于容器的100% 減去0.25em的寬度
?
Flexbox法
CSS未來(lái)發(fā)展的方向就是采用Flexbox這種設(shè)計(jì)，解決像垂直居中這種共同的問(wèn)題。請(qǐng)注意，Flexbox有不止一種辦法居中，他也可以用來(lái)分欄，并解決奇奇怪怪的布局問(wèn)題。
CSS
.Center-Container.is-Flexbox {
? display: -webkit-box;
? display: -moz-box;
? display: -ms-flexbox;
? display: -webkit-flex;
? display: flex;
? -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;
}
.Center-Container.is-Flexbox {
? display: -webkit-box;
? display: -moz-box;
? display: -ms-flexbox;
? display: -webkit-flex;
? display: flex;
? -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;
}
好處：
內(nèi)容可以是任意高寬，溢出也能表現(xiàn)良好
可以用于各種高級(jí)布局技巧
同時(shí)注意： 不支持IE8-9
需要在body上寫樣式，或者需要額外容器
需要各種廠商前綴兼容現(xiàn)代瀏覽器
可能有潛在的性能問(wèn)題
?
最后的建議
各項(xiàng)技術(shù)都有各自的好處，采取什么樣的方法，取決于你所支持的瀏覽器，以及現(xiàn)有標(biāo)簽的結(jié)構(gòu)。請(qǐng)使用上面提供對(duì)照表幫你選出最符合你需要的方法。
“完全居中”法簡(jiǎn)單方便，迅速及時(shí)。以前使用負(fù)Margin值的地方，都可以使用Absolute居中。無(wú)需繁瑣的數(shù)學(xué)計(jì)算，無(wú)需額外標(biāo)簽，而且可以隨時(shí)改變大小。
如果網(wǎng)站需要可變高度的內(nèi)容，而且同時(shí)照顧到瀏覽器兼容性的話，可以嘗試table-cell和inline-block技術(shù)，如果想嘗試新鮮事物的話，可以使用Flexbox，并享受這種高級(jí)技術(shù)帶來(lái)的好處。
========
CSS各種居中方法
http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html水平居中的text-align:center 和 margin:0 auto
?
這兩種方法都是用來(lái)水平居中的，前者是針對(duì)父元素進(jìn)行設(shè)置而后者則是對(duì)子元素。他們起作用的首要條件是子元素必須沒有被float影響，否則一切都是無(wú)用功。margin:0 auto
也可以被寫成margin:0 auto 0 auto。不能理解的童鞋們可以自己去找找關(guān)于css縮寫的內(nèi)容。
?
垂直居中的line-height
?
什么？！margin在垂直居中里不起作用了？顯然事情確實(shí)如此，我們僅有margin:0 auto的用法而沒有auto 0的情況。至于line-height，他也是作用在父元素上，當(dāng)他的值等于父元素的height值時(shí)
，內(nèi)部的文字就會(huì)自動(dòng)的垂直居中了。此處好像僅僅只能是文字而已，遺憾。
?
萬(wàn)能的position大法
?
這個(gè)方法可以說(shuō)真的是萬(wàn)能的。當(dāng)你為一個(gè)元素?zé)o法居中而困擾的時(shí)候，可以果斷的使用他，而且?guī)缀鯖]有后遺癥，絕對(duì)是前端工程師們居家旅行必備的手段之一。
?
具體的做法很簡(jiǎn)單，首先給父元素寫上positon:relative，這么做是為了給子元素打上position:absolute的時(shí)候不會(huì)被定位到外太空去。接下去，寫上子元素的height和width，這個(gè)似乎是必須的
，某些瀏覽器在解析的時(shí)候如果沒有這2個(gè)值的話會(huì)出現(xiàn)意想不到的錯(cuò)位。接著就是整個(gè)方法的核心，給子元素再打上top:50%;left:50%以及margin-top:一半的height值的的負(fù)數(shù);
margin- left:一半的weight值的負(fù)數(shù)。整理一下之后，可能你會(huì)給你的子元素寫上這樣的css（當(dāng)然，父元素也要先寫上width和height）
{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}
?
接下去就刷新頁(yè)面吧，你的子元素已經(jīng)是居中顯示了。
?
使用這個(gè)方法的好處在于無(wú)論你是什么形式的內(nèi)容都可以馬上居中，而缺點(diǎn)就是必須對(duì)元素有確定的寬高值，否則的話可能就需要通過(guò)javascript來(lái)進(jìn)行一些小計(jì)算了。
========
CSS 元素垂直居中的 6種方法
http://blog.csdn.net/wolinxuebin/article/details/7615098轉(zhuǎn)載 2012年05月30日 09:56:06 307589523
轉(zhuǎn)自：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/
2012年03月30日 ? Web設(shè)計(jì) ? 評(píng)論數(shù) 1 ? 被圍觀 306+
利用CSS進(jìn)行元素的水平居中，比較簡(jiǎn)單，行級(jí)元素設(shè)置其父元素的text-align center，塊級(jí)元素設(shè)置其本身的left 和 right margins為auto即可。本文收集了六種利用css進(jìn)行元素的垂直居中的方法，每一種適用于不同的情況，在實(shí)際的使用過(guò)程中選擇某一種方法即可。
Line-Height Method
line height demo
試用：單行文本垂直居中，demo
代碼：
html
<div id="parent">
<div id="child">Text here</div>
</div>
css
#child {
line-height: 200px;
}
垂直居中一張圖片，代碼如下
html
<div id="parent">
<img src="image.png" alt="" />
</div>
css
1
2
3
4
5
6
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
CSS Table Method
table cell demo
適用：通用，demo
代碼：
html
1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>
css
1
2
3
4
5
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
低版本 IE fix bug：
1
2
3
#child {
display: inline-block;
}
Absolute Positioning and Negative Margin
absolute positioning and negative margin demo
適用：塊級(jí)元素，demo
代碼：
html
<div id="parent">
<div id="child">Content here</div>
</div>
css
1
2
3
4
5
6
7
8
9
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Absolute Positioning and Stretching
absolute positioning and vertical stretching demo
適用：通用，但在IE版本低于7時(shí)不能正常工作，demo
代碼：
html
1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>
css
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
Equal Top and Bottom Padding
vertical centering with padding demo
適用：通用，demo
代碼：
html
1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>
css
1
2
3
4
5
6
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
Floater Div
vertical centering with floater div demo
適用：通用，demo
代碼：
html
1
2
3
4
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>
css
#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}
以上就是六種方法，可以在實(shí)際的使用過(guò)程中合理選擇，參考文章《vertical-centering》。
就簡(jiǎn)單明了說(shuō)咋用就行了唄，最煩這種6種、8種、N種的解決方法，一種也用不了。
========
盤點(diǎn)8種CSS實(shí)現(xiàn)垂直居中水平居中的絕對(duì)定位居中技術(shù)
http://blog.csdn.net/freshlover/article/details/11579669Ⅰ.絕對(duì)定位居中(Absolute Centering)技術(shù)
我們經(jīng)常用margin:0 auto來(lái)實(shí)現(xiàn)水平居中，而一直認(rèn)為margin:auto不能實(shí)現(xiàn)垂直居中……實(shí)際上，實(shí)現(xiàn)垂直居中僅需要聲明元素高度和下面的CSS:
[css] view plain copy
.Absolute-Center { ?
? margin: auto; ?
? position: absolute; ?
? top: 0; left: 0; bottom: 0; right: 0; ?
} ?
我不是這種實(shí)現(xiàn)方法的第一人，可能這只是非常常見的一種小技術(shù)，我斗膽將其命名為絕對(duì)居中(Absolute Centering)，雖然如此，但是大多數(shù)討論垂直居中的文章卻從來(lái)不提這種方法，直到我最近瀏覽《How to Center Anything WithCSS》這篇文章的評(píng)論時(shí)候才發(fā)現(xiàn)這種用法。在評(píng)論列表中Simon和Priit都提及了此方法。
如果你有任何擴(kuò)展的功能或建議，可以在此跟帖：
CodePen
SmashingMagazine
Twitter @shshaw
優(yōu)點(diǎn)：
1.支持跨瀏覽器，包括IE8-IE10.
2.無(wú)需其他特殊標(biāo)記，CSS代碼量少
3.支持百分比%屬性值和min-/max-屬性
4.只用這一個(gè)類可實(shí)現(xiàn)任何內(nèi)容塊居中
5.不論是否設(shè)置padding都可居中（在不使用box-sizing屬性的前提下）
6.內(nèi)容塊可以被重繪。
7.完美支持圖片居中。
缺點(diǎn)：
1.必須聲明高度（查看可變高度Variable Height）。
2.建議設(shè)置overflow:auto來(lái)防止內(nèi)容越界溢出。（查看溢出Overflow）。
3.在Windows Phone設(shè)備上不起作用。
瀏覽器兼容性：
Chrome,Firefox, Safari, Mobile Safari, IE8-10.
絕對(duì)定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均測(cè)試通過(guò)。
對(duì)比表格：
絕對(duì)居中法并不是唯一的實(shí)現(xiàn)方法，實(shí)現(xiàn)垂直居中還有些其他的方法，并各有各的優(yōu)勢(shì)。采用哪種技術(shù)取決于你的瀏覽器是否支持和你使用的語(yǔ)言標(biāo)記。這個(gè)對(duì)照表有助于你根據(jù)自己的需求做出正確的選擇。
Technique
Browser Support
Responsive
Overflow
resize:both
Variable Height
Major Caveats
Absolute Centering
Modern & IE8+
Yes
Scroll, can overflow Container
Yes
Yes*
Variable Height not perfect cross-browser
Negative Margins
All
No
Scroll
Resizes but doesn't stay centered
No
Not responsive, margins must be calculated manually
Transforms
Modern & IE9+
Yes
Scroll, can overflow container
Yes
Yes
Blurry rendering
Table-Cell
Modern & IE8+
Yes
Expands container
No
Yes
Extra markup
Inline-Block
Modern, IE8+ & IE7*
Yes
Expands container
No
Yes
Requires container, hacky styles
Flexbox
Modern & IE10+
Yes
Scroll, can overflow container
Yes
Yes
Requires container, vendor prefixes
?
解釋：
通過(guò)以上描述，絕對(duì)居中（AbsoluteCentering）的工作機(jī)理可以闡述如下：
1、在普通內(nèi)容流（normal content flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。
W3C中寫道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.
2、position:absolute使絕對(duì)定位塊跳出了內(nèi)容流，內(nèi)容流中的其余部分渲染時(shí)絕對(duì)定位部分不進(jìn)行渲染。
Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space
3、為塊區(qū)域設(shè)置top: 0; left: 0; bottom: 0; right: 0;將給瀏覽器重新分配一個(gè)邊界框，此時(shí)該塊block將填充其父元素的所有可用空間，父元素一般為body或者聲明為position:relative;的容器。
Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).
4、 ?給內(nèi)容塊設(shè)置一個(gè)高度height或?qū)挾葁idth，能夠防止內(nèi)容塊占據(jù)所有的可用空間，促使瀏覽器根據(jù)新的邊界框重新計(jì)算margin:auto
Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.
5、由于內(nèi)容塊被絕對(duì)定位，脫離了正常的內(nèi)容流，瀏覽器會(huì)給margin-top,margin-bottom相同的值，使元素塊在先前定義的邊界內(nèi)居中。
W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically
這么看來(lái)， margin:auto似乎生來(lái)就是為絕對(duì)居中(Absolute Centering)設(shè)計(jì)的，所以絕對(duì)居中(Absolute Centering)應(yīng)該都兼容符合標(biāo)準(zhǔn)的現(xiàn)代瀏覽器。
簡(jiǎn)而言之（TL;DR）：絕對(duì)定位元素不在普通內(nèi)容流中渲染，因此margin:auto可以使內(nèi)容在通過(guò)top: 0; left: 0; bottom: 0;right: 0;設(shè)置的邊界內(nèi)垂直居中。
居中方式：
一、容器內(nèi)（Within Container）
內(nèi)容塊的父容器設(shè)置為position:relative，使用上述絕對(duì)居中方式，可以使內(nèi)容居中顯示于父容器。
[css] view plain copy
.Center-Container { ?
? position: relative; ?
} ?
??
.Absolute-Center { ?
? width: 50%; ?
? height: 50%; ?
? overflow: auto; ?
? margin: auto; ?
? position: absolute; ?
? top: 0; left: 0; bottom: 0; right: 0; ?
} ?
以下其余的demo默認(rèn)上面的CSS樣式已引用包括進(jìn)去，在此基礎(chǔ)上只提供額外的類供用戶追加以實(shí)現(xiàn)不同的功能。
二、視區(qū)內(nèi)（Within Viewport）
想讓內(nèi)容塊一直停留在可視區(qū)域內(nèi)？將內(nèi)容塊設(shè)置為position:fixed;并設(shè)置一個(gè)較大的z-index層疊屬性值。
[css] view plain copy
.Absolute-Center.is-Fixed { ?
? position: fixed; ?
? z-index: 999; ?
} ?
注意：對(duì)MobileSafari，若內(nèi)容塊不是放在設(shè)置為position:relative;的父容器中，內(nèi)容塊將垂直居中于整個(gè)文檔，而不是可視區(qū)域內(nèi)垂直居中。
三、邊欄 (Offsets)
如果你要設(shè)置一個(gè)固頂?shù)念^或增加其他的邊欄，只需要在內(nèi)容塊的樣式中加入像這樣的CSS樣式代碼：top:70px;bottom:auto;由于已經(jīng)聲明了margin:auto;，該內(nèi)容塊將會(huì)垂直居中于你通過(guò)top,left,bottom和right屬性定義的邊界框內(nèi)。
你可以將內(nèi)容塊固定與屏幕的左側(cè)或右側(cè)，并且保持內(nèi)容塊垂直居中。使用right:0;left:auto;固定于屏幕右側(cè)，使用left:0;right:auto;固定與屏幕左側(cè)。
[css] view plain copy
.Absolute-Center.is-Right { ?
? left: auto; right: 20px; ?
? text-align: right; ?
} ?
??
.Absolute-Center.is-Left { ?
? right: auto; left: 20px; ?
? text-align: left; ?
} ?
?
四、響應(yīng)式/自適應(yīng)(Responsive)
絕對(duì)居中最大的優(yōu)勢(shì)應(yīng)該就是對(duì)百分比形式的寬高支持的非常完美。甚至min-width/max-width 和min-height/max-height這些屬性在自適應(yīng)盒子內(nèi)的表現(xiàn)也和預(yù)期很一致。
[css] view plain copy
.Absolute-Center.is-Responsive { ?
? width: 60%; ??
? height: 60%; ?
? min-width: 200px; ?
? max-width: 400px; ?
? padding: 40px; ?
} ?
給內(nèi)容塊元素加上padding也不影響內(nèi)容塊元素的絕對(duì)居中實(shí)現(xiàn)。
五、 溢出情況(Overflow)
內(nèi)容高度大于塊元素或容器（視區(qū)viewport或設(shè)為position:relative的父容器）會(huì)溢出，這時(shí)內(nèi)容可能會(huì)顯示到塊與容器的外面，或者被截?cái)喑霈F(xiàn)顯示不全（分別對(duì)應(yīng)內(nèi)容塊overflow屬性設(shè)置為visible和hidden的表現(xiàn)）。
加上overflow: auto會(huì)在內(nèi)容高度超過(guò)容器高度的情況下給內(nèi)容塊顯示滾動(dòng)條而不越界。
[css] view plain copy
.Absolute-Center.is-Overflow { ?
? overflow: auto; ?
} ?
如果內(nèi)容塊自身不設(shè)置任何padding的話，可以設(shè)置max-height: 100%;來(lái)保證內(nèi)容高度不超越容器高度。
六、重繪(Resizing)
你可以使用其他class類或JavaScript代碼來(lái)重繪內(nèi)容塊同時(shí)保證居中，無(wú)須手動(dòng)重新計(jì)算中心尺寸。當(dāng)然，你也可以添加resize屬性來(lái)讓用戶拖拽實(shí)現(xiàn)內(nèi)容塊的重繪。
絕對(duì)居中（Absolute Centering）可以保證內(nèi)容塊始終居中，無(wú)論內(nèi)容塊是否重繪。可以通過(guò)設(shè)置min-/max-來(lái)根據(jù)自己需要限制內(nèi)容塊的大小，并防止內(nèi)容溢出窗口/容器。
[css] view plain copy
.Absolute-Center.is-Resizable { ?
? min-width: 20%; ?
? max-width: 80%; ?
? min-height: 20%; ?
? max-height: 80%; ?
? resize: both; ?
? overflow: auto; ?
} ?
如果不使用resize:both屬性，可以使用CSS3動(dòng)畫屬性transition來(lái)實(shí)現(xiàn)重繪的窗口之間平滑的過(guò)渡。一定要設(shè)置overflow:auto;以防重繪的內(nèi)容塊尺寸小于內(nèi)容的實(shí)際尺寸這種情況出現(xiàn)。
絕對(duì)居中（AbsoluteCentering）是唯一支持resize:both屬性實(shí)現(xiàn)垂直居中的技術(shù)。
注意：
要設(shè)置max-width/max-height屬性來(lái)彌補(bǔ)內(nèi)容塊padding，否則可能溢出。
手機(jī)瀏覽器和IE8-IE10瀏覽器不支持resize屬性，所以如果對(duì)你來(lái)說(shuō)，這部分用戶體驗(yàn)很必要，務(wù)必保證對(duì)resizing你的用戶有可行的退路。
聯(lián)合使用resize 和 transition屬性會(huì)在用戶重繪時(shí)，產(chǎn)生一個(gè)transition動(dòng)畫延遲時(shí)間。
七、圖片(Images)
絕對(duì)居中（AbsoluteCentering）也適用于圖片。對(duì)圖片自身應(yīng)用class類或CSS樣式，并給圖片添加height:auto樣式，圖片會(huì)自適應(yīng)居中顯示，如果外層容器可以resize則隨著容器的重繪，圖片也相應(yīng)重繪，始終保持居中。
需要注意的是height:auto雖然對(duì)圖片居中有用，但如果是在圖片外層的內(nèi)容塊上應(yīng)用了height:auto則會(huì)產(chǎn)生一些問(wèn)題：規(guī)則的內(nèi)容塊會(huì)被拉伸填充整個(gè)容器。這時(shí)，我們可以使用可變高度(Variable Height)方式解決這個(gè)問(wèn)題。問(wèn)題的原因可能是渲染圖片時(shí)要計(jì)算圖片高度，這就如同你自己定義了圖片高度一樣，瀏覽器得到了圖片高度就不會(huì)像其他情況一樣去解析margin:auto垂直居中了。所以我們最好對(duì)圖片自身應(yīng)用這些樣式而不是父元素。
HTML:
[html] view plain copy
<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" /> ?
CSS:
[css] view plain copy
.Absolute-Center.is-Image { ?
? height: auto; ?
} ?
??
.Absolute-Center.is-Image img { ??
? width: 100%; ?
? height: auto; ?
} ?
最好是對(duì)圖片自身應(yīng)用此方法，效果如下圖：
八、可變高度（Variable Height）
這種情況下實(shí)現(xiàn)絕對(duì)居中（AbsoluteCentering）必須要聲明一個(gè)高度，不管你是基于百分比的高度還是通過(guò)max-height控制的高度，還有，別忘了設(shè)置合適的overflow屬性。對(duì)自適應(yīng)/響應(yīng)式情景，這種方法很不錯(cuò)。
與聲明高度效果相同的另一種方法是設(shè)置display:table;這樣無(wú)論實(shí)際內(nèi)容有多高，內(nèi)容塊都會(huì)保持居中。這種方法在一些瀏覽器（如IE/FireFox）上會(huì)有問(wèn)題，我的搭檔Kalley?
在ELL Creative（訪問(wèn)ellcreative.com ）上寫了一個(gè)基于Modernizr插件的檢測(cè)函數(shù)，用來(lái)檢測(cè)瀏覽器是否支持這種居中方法，進(jìn)一步增強(qiáng)用戶體驗(yàn)。
Javascript：
[javascript] view plain copy
/* Modernizr Test for Variable Height Content */ ?
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) { ?
? Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop); ?
}); ?
CSS：
[css] view plain copy
.absolutecentercontent .Absolute-Center.is-Variable { ?
? display: table; ?
? height: auto; ?
} ?
缺點(diǎn)：
瀏覽器兼容性不太好，若Modernizr不能滿足你的需求，你需要尋找其他方法解決。
1. ? ? ?與上述重繪(Resizing)情況的方法不兼容
2. ? ? ?Firefox/IE8:使用display:table會(huì)使內(nèi)容塊垂直居上，不過(guò)水平還是居中的。
3. ? ? ?IE9/10: 使用display:table會(huì)使內(nèi)容塊顯示在容器左上角。
4. ? ? ?Mobile Safari:內(nèi)容塊垂直居中；若使用百分比寬度，水平方向居中會(huì)稍微偏離中心位置。
Ⅱ.其他居中實(shí)現(xiàn)技術(shù)
絕對(duì)居中（Absolute Centering）是一種非常不錯(cuò)的技術(shù)，除此之外還有一些方法可以滿足更多的具體需求，最常見的推薦：NegativeMargins, Transforms,Table-Cell, Inline-Block方式和新出現(xiàn)的Flexbox.方式。這些方法許多文章都有深入講解，這里只做簡(jiǎn)單闡述。
九、負(fù)外邊距(Negative Margins)
這或許是當(dāng)前最流行的使用方法。如果塊元素尺寸已知，可以通過(guò)以下方式讓內(nèi)容塊居中于容器顯示：
外邊距margin取負(fù)數(shù)，大小為width/height（不使用box-sizing: border-box時(shí)包括padding，）的一半，再加上top: 50%; left: 50%;。即：
[css] view plain copy
.is-Negative { ?
? ? ? ? width: 300px; ?
? ? ? ? height: 200px; ?
? ? ? ? padding: 20px; ?
? ? ? ? position: absolute; ?
? ? ? ? top: 50%; left: 50%; ?
? ? ? ? margin-left: -170px; /* (width + padding)/2 */ ?
? ? ? ? margin-top: -120px; /* (height + padding)/2 */ ?
} ?
測(cè)試表明，這是唯一在IE6-IE7上也表現(xiàn)良好的方法。
優(yōu)點(diǎn)：
1. ? ? ?良好的跨瀏覽器特性，兼容IE6-IE7。
2. ? ? ?代碼量少。
缺點(diǎn)：
1. ? ? ?不能自適應(yīng)。不支持百分比尺寸和min-/max-屬性設(shè)置。
2. ? ? ?內(nèi)容可能溢出容器。
3. ? ? ?邊距大小與padding,和是否定義box-sizing: border-box有關(guān)，計(jì)算需要根據(jù)不同情況。
十、變形（Transforms）
這是最簡(jiǎn)單的方法，不近能實(shí)現(xiàn)絕對(duì)居中同樣的效果，也支持聯(lián)合可變高度方式使用。內(nèi)容塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的前綴，還要加上
top: 50%; left: 50%;
代碼類：
[css] view plain copy
.is-Transformed { ??
? width: 50%; ?
? margin: auto; ?
? position: absolute; ?
? top: 50%; left: 50%; ?
? -webkit-transform: translate(-50%,-50%); ?
? ? ? -ms-transform: translate(-50%,-50%); ?
? ? ? ? ? transform: translate(-50%,-50%); ?
} ?
優(yōu)點(diǎn)：
1. ? ? ?內(nèi)容可變高度
2. ? ? ?代碼量少
缺點(diǎn)：
1. ? ? ?IE8不支持
2. ? ? ?屬性需要寫瀏覽器廠商前綴
3. ? ? ?可能干擾其他transform效果
4. ? ? ?某些情形下會(huì)出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象
進(jìn)一步了解transform實(shí)現(xiàn)居中的知識(shí)可以參考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》
十一、表格單元格（Table-Cell）
總的說(shuō)來(lái)這可能是最好的居中實(shí)現(xiàn)方法，因?yàn)閮?nèi)容塊高度會(huì)隨著實(shí)際內(nèi)容的高度變化，瀏覽器對(duì)此的兼容性也好。最大的缺點(diǎn)是需要大量額外的標(biāo)記，需要三層元素讓最內(nèi)層的元素居中。
HTML：
[html] view plain copy
<div class="Center-Container is-Table"> ?
? <div class="Table-Cell"> ?
? ? <div class="Center-Block"> ?
? ? <!-- CONTENT --> ?
? ? </div> ?
? </div> ?
</div> ?
CSS：
[css] view plain copy
.Center-Container.is-Table { display: table; } ?
.is-Table .Table-Cell { ?
? display: table-cell; ?
? vertical-align: middle; ?
} ?
.is-Table .Center-Block { ?
? width: 50%; ?
? margin: 0 auto; ?
} ?
優(yōu)點(diǎn)：
1. ? ? ?高度可變
2. ? ? ?內(nèi)容溢出會(huì)將父元素?fù)伍_。
3. ? ? ?跨瀏覽器兼容性好。
缺點(diǎn)：
需要額外html標(biāo)記
了解更多表格單元格實(shí)現(xiàn)居中的知識(shí)，請(qǐng)參考Roger Johansson發(fā)表在456bereastreet的文章《Flexibleheight vertical centering with CSS, beyond IE7》
十二、行內(nèi)塊元素（Inline-Block）
很受歡迎的一種居中實(shí)現(xiàn)方式，基本思想是使用display: inline-block, vertical-align: middle和一個(gè)偽元素讓內(nèi)容塊處于容器中央。這個(gè)概念的解釋可以參考CSS-Tricks上的文章《Centering in the Unknown》
我這個(gè)例子也有一些其他地方見不到的小技巧，有助于解決一些小問(wèn)題。
如果內(nèi)容塊寬度大于容器寬度，比如放了一個(gè)很長(zhǎng)的文本，但內(nèi)容塊寬度設(shè)置最大不能超過(guò)容器的100%減去0.25em，否則使用偽元素:after內(nèi)容塊會(huì)被擠到容器頂部，使用:before內(nèi)容塊會(huì)向下偏移100%。
如果你的內(nèi)容塊需要占據(jù)盡可能多的水平空間，可以使用max-width: 99%;（針對(duì)較大的容器）或max-width: calc(100% -0.25em)（取決于支持的瀏覽器和容器寬度）。
HTML：
[html] view plain copy
<div class="Center-Container is-Inline"> ?
? <div class="Center-Block"> ?
? ? <!-- CONTENT --> ?
? </div> ?
</div> ?
CSS：
[css] view plain copy
.Center-Container.is-Inline { ??
? text-align: center; ?
? overflow: auto; ?
} ?
??
.Center-Container.is-Inline:after, ?
.is-Inline .Center-Block { ?
? display: inline-block; ?
? vertical-align: middle; ?
} ?
??
.Center-Container.is-Inline:after { ?
? content: ''; ?
? height: 100%; ?
? margin-left: -0.25em; /* To offset spacing. May vary by font */ ?
} ?
??
.is-Inline .Center-Block { ?
? max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ ?
? /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ ??
} ?
這種方法的優(yōu)劣和單元格Table-Cell方式差不多，起初我把這種方式忽略掉了，因?yàn)檫@確實(shí)是一種hack方法。不過(guò)，無(wú)論如何，這是很流行的一種用法，瀏覽器支持的也很好。
優(yōu)點(diǎn)：
1. ? ? ?高度可變
2. ? ? ?內(nèi)容溢出會(huì)將父元素?fù)伍_。
3. ? ? ?支持跨瀏覽器，也適應(yīng)于IE7。
缺點(diǎn)：
1.需要一個(gè)容器
2.水平居中依賴于margin-left: -0.25em;該尺寸對(duì)于不同的字體/字號(hào)需要調(diào)整。
3.內(nèi)容塊寬度不能超過(guò)容器的100% - 0.25em。
?
更多相關(guān)知識(shí)參考ChrisCoyier的文章《Centeringin the Unknown》
十三、Flexbox
這是CSS布局未來(lái)的趨勢(shì)。Flexbox是css3新增屬性，設(shè)計(jì)初衷是為了解決像垂直居中這樣的常見布局問(wèn)題。相關(guān)的文章如《Centering Elements with Flexbox》
記住Flexbox不只是用于居中，也可以分欄或者解決一些令人抓狂的布局問(wèn)題。
優(yōu)點(diǎn)：
1.內(nèi)容塊的寬高任意，優(yōu)雅的溢出。
2.可用于更復(fù)雜高級(jí)的布局技術(shù)中。
缺點(diǎn)：
1. ? ? ?IE8/IE9不支持。
2. ? ? ?Body需要特定的容器和CSS樣式。
3. ? ? ?運(yùn)行于現(xiàn)代瀏覽器上的代碼需要瀏覽器廠商前綴。
4. ? ? ?表現(xiàn)上可能會(huì)有一些問(wèn)題
有關(guān)Flexbox Centering的文章可以參考David Storey的文章《Designing CSS Layouts WithFlexbox Is As Easy As Pie》
建議：
每種技術(shù)都有其優(yōu)劣之處。你選擇哪一種技術(shù)取決于支持的瀏覽器和你的編碼。使用上面的對(duì)照表有助于你做出決定。
作為一種簡(jiǎn)單的替代方案，絕對(duì)居中(Absolute Centering)技術(shù)表現(xiàn)良好。曾經(jīng)你使用負(fù)邊距（Negative Margins）的地方，現(xiàn)在可以用絕對(duì)居中(Absolute Centering)替代了。你不再需要處理討厭的邊距計(jì)算和額外的標(biāo)記，而且還能讓內(nèi)容塊自適應(yīng)大小居中。
如果你的站點(diǎn)需要可變高度的內(nèi)容，可以試試單元格(Table-Cell)和行內(nèi)塊元素(Inline-Block)這兩種方法。如果你處在流血的邊緣，試試Flexbox，體驗(yàn)一下這一高級(jí)布局技術(shù)的好處吧。
========
總結(jié)
- 上一篇： T-SQL游标学习总结
- 下一篇： CSS技巧学习总结