CSS居中学习总结
div居中代碼 DIV水平居中顯示CSS代碼
http://www.divcss5.com/rumen/r622.shtml如何使用CSS讓DIV居中顯示，讓div水平居中有哪些CSS樣式呢？
需要的主要css代碼有兩個，一個為text-align:center（內(nèi)容居中），另外一個為margin:0 auto；其兩個樣式需要配合使用才能實現(xiàn)div盒子的居中顯示排版。
首先我們對body設(shè)置text-align:center，再對需要居中的div盒子設(shè)置css樣式margin:0 auto，這樣即可讓對應div水平居中。
實例講解div居中代碼應用，為了觀察div居中效果，我們對div設(shè)置一個div命名為“.div”在html中div標簽內(nèi)使用class=“div”,設(shè)置其寬度為400px;高度為100px，邊框為紅色。以便我們觀察效果。
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實例 </div> </body> </html>
2、div+css居中實例截圖
div css實現(xiàn)居中效果截圖
div實現(xiàn)居中效果截圖
3、div居中代碼應用特點
此居中方法是讓div居中效果完美兼容各大平臺、兼容各大瀏覽器，無論高版本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)容對齊 居中 居左 居右篇
CSS text-align目錄
text-align語法
text-align常使用地方
DIV CSS text-align實例
text-align樣式屬性總結(jié)
一、text-align樣式語法
1、text-align的值與說明：
text-align語法：
text-align : left | right | center | justify?
text-align參數(shù)值與說明：?
left : 左對齊
right : 右對齊
center : 居中
*justify : 兩端對齊（不推薦使用，通常大部分瀏覽器不使用）
我們對text-align常用的參數(shù)值為left、right、center
text-align功能說明：
設(shè)置或檢索對象中文本的左中右對齊方式。
2、使用范例與使用語法
div{ text-align:left } div標簽對象內(nèi)內(nèi)容（圖片和文字等）將靠左對齊
div{ text-align:right} div標簽內(nèi)內(nèi)容（圖片和文字等）將靠右對齊
div{ text-align:center } div標簽內(nèi)內(nèi)容（圖片和文字等）將居中對齊
二、text-align常使用地方 ? - ? TOP
text-align常常用于盒子里的文字、圖片等內(nèi)容居左、居中、局右。比較常見是常規(guī)的讓內(nèi)容局左或居中對齊排列。
CSS text-align樣式應用舉例
text-align舉例截圖
三、text-align實例
我們設(shè)置3個盒子，分別都設(shè)置盒子CSS高度、CSS寬度相同，再分別設(shè)置三個盒子里內(nèi)容靠左對齊、居中對齊、靠右對齊。
我們都設(shè)置3個盒子高度為50px；寬度為300px；便于觀察我們設(shè)置3個盒子都1個黑色邊框樣式。
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è)置 靠左 居中 靠右對齊?
www.divcss5.com?
*/?
2）、HTML代碼
<div class="div1">我被靠左對齊</div>?
<div class="div2">我被居中顯示</div>?
<div class="div3">我被靠右對齊</div>?
2、案例截圖
DIV+CSS text-align內(nèi)容居中、內(nèi)容居左、內(nèi)容居右案例截圖
內(nèi)容居左、內(nèi)容居中、內(nèi)容局右演示案例截圖
通過DIV CSS設(shè)置text-align left、text-align right、text-align center對齊方式實現(xiàn)居左對齊、居右對齊、居中對齊樣式效果。希望大家通過基礎(chǔ)和實例掌握CSS text-align樣式。
四、text-align樣式屬性總結(jié) ? - ? TOP
CSS居中，通常我們對對象設(shè)置text-align:center居中樣式即可實現(xiàn)。而平時我們的文章內(nèi)容均居左text-align:left，大家要記住我們所到內(nèi)容居左、居右、居中要知道使用text-align樣式屬性即可實現(xiàn)。
通常我們讓圖片、文字內(nèi)容居左靠左對齊、居中對齊、居右靠右對齊顯示，我們使用text-align屬性單詞即可實現(xiàn)對象內(nèi)內(nèi)容根據(jù)需求對齊。text-align:left 內(nèi)容靠左居左對齊；text-align:right內(nèi)容靠右居右對齊；text-align:center內(nèi)容居中對齊。
如果需要內(nèi)容上下垂直居中使用css line-height屬性樣式。了解line-height可進入css line-height教程：http://www.divcss5.com/rumen/r363.shtml
擴展閱讀
1、布局居中
2、布局居右
3、布局局左
4、CSS垂直居中
========
DIV+CSS居中布局條件與CSS布局居中代碼
http://www.divcss5.com/jiqiao/j482.shtml一、讓DIV+CSS網(wǎng)頁布局居中分析介紹 ? - ? TOP
一般網(wǎng)頁主體內(nèi)容布局均為居中于瀏覽器。如DIVCSS5首頁（http://www.divcss5.com/），主體為居中布局。
網(wǎng)頁布局居中實際運用截圖
網(wǎng)頁布局居中演示截圖
如何使用CSS讓整個網(wǎng)頁布局居中呢？布局居中條件是什么呢？
首先我們要對body設(shè)置css內(nèi)容居中樣式（css text-align:center），然后布局最外層DIV盒子時候使用 margin:0 auto即可讓對象布局居中。
當然我們對盒子對象使用了 margin:0 auto，有的瀏覽器不對body對象加text-align:center樣式，布局仍然是居中的，這是因為不同瀏覽器默認樣式不同造成，如果不對body設(shè)置text-align:center，這樣會造成有的瀏覽器布局居中，有的靠左，這樣布局的兼容就產(chǎn)生了。
解釋：margin:0 auto，意思是讓對象上下間隔為0，左右間隔自動，隨對象寬度左右間隔自動，擴展了解css margin
二、小結(jié)DIV CSS網(wǎng)頁布局居中條件 ? - ? TOP
1、對body設(shè)置CSS內(nèi)容居中樣式text-align:center，代碼：body{text-align:center}
2、對最外層對象設(shè)置margin:0 auto樣式，代碼：.divcss5{margin:0 auto}
三、網(wǎng)頁布局居中實例 ? - ? TOP
為了觀察到布局居中效果，我們CSS命名對象為".divcss5",設(shè)置CSS邊框為黑色，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è)置對象邊框、寬度、高度 便于觀察布局效果 */?
</style>?
2、HTML代碼片段：
<div class="divcss5">對象DIVCSS5布局居中了</div>?
3、布局居中效果截圖
CSS網(wǎng)頁布局居中用法案例截圖
居中案例效果截圖
4、在線樣式
http://www.divcss5.com/yanshi/2013041801.html
四、居中總結(jié) ? - ? TOP
對象內(nèi)內(nèi)容居中為用text-align樣式，布局居中我們還要用到margin樣式，希望大家拷貝代碼實踐，幾乎每次新制作CSS項目時候，我們都需要對對象布局居中做好條件。所以DIVCSS5為大家整理一套每次開發(fā)CSS項目時候都可以使用的最基礎(chǔ)CSS+HTML模板（了解與下載DIV+CSS初始化模板）。
擴展知識：
1、css內(nèi)容居中 背景圖片居中
2、css line-height行高垂直居中
3、為什么CSS初始化
========
如何只用CSS做到完全居中
http://blog.jobbole.com/46574/【感謝@埃姆杰 的熱心翻譯。如果其他朋友也有不錯的原創(chuàng)或譯文，可以嘗試提交到伯樂在線。】
我們都知道 margin:0 auto; 的樣式能讓元素水平居中，而 margin: auto; 卻不能做到垂直居中……直到現(xiàn)在。但是，請注意！想讓元素絕對居中，只需要聲明元素高度，并且附加以下樣式，就可以做到：
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;
}
我并不是第一個發(fā)現(xiàn)這種方法的人（不過我還是敢把它叫做“完全居中”），它有可能是種非常普遍的技巧。但大多數(shù)介紹垂直居中的文章中并沒有提到過這種方法。如果不是瀏覽這篇文章的評論，我甚至根本就不會發(fā)現(xiàn)這個辦法。
上面那篇文章的評論欄中，Simon提供了一個jsFiddle的鏈接，其他的方法相比之下就相形見絀了。（Priit也在評論欄中提到了同樣的方法）。深入研究了一番之后，我又用某些關(guān)鍵詞找到了記載這種方法的三個網(wǎng)站：站點一、站點二、站點三。
以前從未用過這種方法的我想試試，看看這種”完全居中”的方法到底有多么神奇。 好處：
跨瀏覽器，兼容性好（無需hack，可兼顧IE8~IE10）
無特殊標記，樣式更精簡
自適應布局，可以使用百分比和最大最小高寬等樣式
居中時不考慮元素的padding值（也不需要使用box-sizing樣式）
布局塊可以自由調(diào)節(jié)大小
img的圖像也可以使用
同時注意：
必須聲明元素高度
推薦設(shè)置overflow:auto;樣式避免元素溢出，顯示不正常的問題
這種方法在Windows Phone上不起作用
瀏覽器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”經(jīng)測試可以完美地應用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以運行在IE8~IE10上
對照表
“完全居中”并不是本篇文章中唯一的選項。要做到垂直居中，還存在著其他方法，各有各的長處。采取什么樣的方法，取決于你所支持的瀏覽器，以及現(xiàn)有標簽的結(jié)構(gòu)。下面這張對照表能夠幫你選出最符合你需要的方法。
所用樣式
支持的瀏覽器
是否 響應式
內(nèi)容溢出后的樣式
resize:both
高度可變
主要缺陷
Absolute
現(xiàn)代瀏覽器&IE8+
是
會導致容器溢出
是
是*
‘可變高度’的特性不能跨瀏覽器
負margin值
所有
否
帶滾動條
大小改變后不再居中
否
不具有響應式特性，margin值必須經(jīng)過手工計算
Transform
現(xiàn)代瀏覽器&IE9+
是
會導致容器溢出
是
是
妨礙渲染
Table-Cell
現(xiàn)代瀏覽器&IE8+
是
撐開容器
否
是
會加上多余的標記
Inline-Block
現(xiàn)代瀏覽器&IE8+&IE7*
是
撐開容器
否
是
需要使用容器包裹和hack式的樣式
Flexbox
現(xiàn)代瀏覽器&IE10+
是
會導致容器溢出
是
是
需要使用容器包裹和廠商前綴（vendor prefix）
說明
在研究了規(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; 的元素會變成塊元素，并脫離普通文檔流。而文檔的其余部分照常渲染，元素像是不在原來的位置一樣。 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; 樣式的塊元素會讓瀏覽器為它包裹一層新的盒子，因此這個元素會填滿它相對父元素的內(nèi)部空間，這個相對父元素可以是是body標簽，或者是一個設(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è)置了寬高以后，瀏覽器會阻止元素填滿所有的空間，根據(jù)margin: auto; 的要求，重新計算，并包裹一層新的盒子。 Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.
5. 既然塊元素是絕對定位的，又脫離了普通文檔流，因此瀏覽器在包裹盒子之前會給margin-top和margin-bottom設(shè)置一個相等的值。 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
使用“完全居中”，有意遵照了標準margin: auto; 樣式渲染的規(guī)定，所以應當在與標準兼容的各種瀏覽器中起作用。
對齊
容器內(nèi)對齊
使用“完全居中”，就可以在一個設(shè)置了position: relative的容器中做到完全居中元素了！ （居中例子，請前往英文原文查看）
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;
}
接下來的示例會假設(shè)已經(jīng)包含了以下樣式，并且以逐步添加樣式的方式提供不同的特性。
在可視區(qū)域內(nèi)居中
想要使內(nèi)容區(qū)在可視區(qū)域內(nèi)居中么？設(shè)置position: fixed樣式，并設(shè)置一個較高的z-index值，就可以做到。
CSS
.Absolute-Center.is-Fixed {
? position: fixed;
? z-index: 999;
}
.Absolute-Center.is-Fixed {
? position: fixed;
? z-index: 999;
}
移動版Safari的說明：如果外面沒有一層設(shè)置position: relative的容器，內(nèi)容區(qū)會以整個文檔的高度的中心點為基準居中，而不是以可視區(qū)域的高度中心點為基準居中。
偏移值
如果需要添加固定的標題，或者其他帶偏移樣式的元素，可以直接把類似top: 70px; 的樣式寫進內(nèi)容區(qū)域的樣式中。一旦聲明了margin: auto; 的樣式，內(nèi)容塊的top left bottom right的屬性值也會同時計算進去。
如果想讓內(nèi)容塊在貼近側(cè)邊的過程中保持水平居中，可以使用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;
}
帶響應式
使用absolute的最大好處就是可以完美地使用帶百分比的寬高樣式！就算是min-width/max-width或者min-height/max-height也能夠有如預期般的表現(xiàn)。
再進一步加上padding樣式的話，absolute式的完全居中也絲毫不會破壞！
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ū)域或者一個position: relative的容器，其內(nèi)容可能會溢出容器，或被容器截斷。只要內(nèi)容區(qū)域沒有超出容器（沒有給內(nèi)容容器預留padding的話，可以設(shè)置max-height: 100%;的樣式），那么容器內(nèi)就會產(chǎn)生滾動條。
CSS
.Absolute-Center.is-Overflow {
? overflow: auto;
}
.Absolute-Center.is-Overflow {
? overflow: auto;
}
大小可調(diào)整
使用其他樣式，或者使用JavaScript調(diào)整內(nèi)容區(qū)的大小，也是不用手動重新計算的！如果設(shè)置了resize的樣式，甚至可以讓用戶自行調(diào)節(jié)內(nèi)容區(qū)域的大小。 “完全居中”法，無論內(nèi)容區(qū)怎么改變大小，都會保持居中。
設(shè)置了min-/max- 開頭的屬性可以限制區(qū)塊的大小而不用擔心撐開容器。
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樣式，因為改變大小后的容器高寬很有可能會小于內(nèi)容的高寬。 “完全居中”法是唯一一種能支持使用resize: both樣式的方法。
使用注意：
需要設(shè)置max-width/max-height給內(nèi)容區(qū)域留足夠的空間，不然就有可能使容器溢出。
resize屬性不支持移動版瀏覽器和IE8-10，如果用戶體驗很重要的話，請確保用戶可以有其他替代方法來改變大小。
同時使用resize樣式和transition會使用戶在開始改變大小時產(chǎn)生等于transition效果時間等長的延時。
?
圖像
圖像也同樣有效！提供相應的class，并指定樣式 height: auto; ，就得到了一張隨著容器改變大小的響應式圖片。
請注意，height: auto; 樣式雖然對圖片有效，如果沒有用到了后面介紹的‘可變高技巧’，則會導致普通內(nèi)容區(qū)域伸長以適應容器長度。
瀏覽器很有可能是根據(jù)渲染結(jié)果填充了圖像高度值，所以在測試過的瀏覽器中，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樣式的影響，也可以是百分比。這非常適合響應式的方案，只需要設(shè)置好帶溢出內(nèi)容就行。
另一種替代方案是設(shè)置display: table樣式居中，，不管內(nèi)容的長度。這種方法會在一些瀏覽器中產(chǎn)生問題（主要是IE和Firefox）。我在ELL Creative的朋友Kalley寫了一個基于Modernizr 的測試，可以用來檢查瀏覽器是否支持這種居中方案。現(xiàn)在這種方法可以做到漸進增強。
注意要點： 這種方法會破壞瀏覽器兼容性，如果Modernizr測試不能滿足你的需求，你可能需要考慮其他的實現(xiàn)方案。
與大小可調(diào)整技術(shù)是不兼容的
Firefox/IE8中使用display: table，內(nèi)容區(qū)在垂直方向靠上，水平方向仍然居中。
IE9/10中使用display: table，內(nèi)容區(qū)會跑到左上角。
移動版Safari中內(nèi)容區(qū)是水平對齊的，但是如果使用了百分比的寬度，水平方向上會稍稍偏離中心。
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;
}
?
其他方法
“完全居中”法是解決居中問題的好方法，同時也有許多可以滿足不同需求的其他方法。最常見的，推薦的方法有負margin值、transform法、table-cell法、inline-block法、以及現(xiàn)在出現(xiàn)的Flexbox法，這些方法其他文章都有深入介紹，所以這里只會稍稍提及。
?
負margin值
這或許是最常用的方法。如果知道了各個元素的大小，設(shè)置等于寬高一半大小的負margin值（如果沒有使用box-sizing: border-box樣式，還需要加上padding值），再配合top: 50%; left: 50%;樣式就會使塊元素居中。
需要注意的是，這是按照預想情況也能在工作在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è)置min-/max-的最大值最小值。
內(nèi)容可能會超出容器
需要為padding預留空間，或者需要使用box-sizing: border-box樣式。
?
transform法
和“完全居中”法的好處一樣，簡單有效，同時支持可變高度。為內(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)容高度可變
代碼量小
同時注意：
不支持IE8
需要寫廠商前綴
會和其他transform樣式有沖突
某些情況下的邊緣和字體渲染會有問題
?
table-cell法
這種可能是最好的方法，因為高度可以隨內(nèi)容改變，瀏覽器支持也不差。主要缺陷是會產(chǎn)生額外的標簽，每一個需要居中的元素需要三個額外的HTML標簽。
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)容溢出則能自動撐開父元素高度
瀏覽器兼容性好
同時注意：
需要額外的HTML標簽
inline-block法
迫切需要的方法：inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle樣式和偽元素讓內(nèi)容塊在容器中居中。我的實現(xiàn)用到了幾個在其他地方見不到的新技巧解決了一些問題。
內(nèi)容區(qū)聲明的寬度不能大于容器的100% 減去0.25em的寬度。就像一段帶有長文本的區(qū)域。不然，內(nèi)容區(qū)域會被推到頂端，這就是使用:after偽類的原因。使用:before偽類則會讓元素有100%的大小！
如果內(nèi)容塊需要盡可能大地占用水平空間，可以為大容器加上max-width: 99%;樣式，或者考慮瀏覽器和容器寬度的情況下使用max-width: calc(100% – 0.25em) 樣式。
這種方法和table-cell的大多數(shù)好處相同，不過最初我放棄了這個方法，因為它更像是hack。不管這一點的話，瀏覽器支持很不錯，而且也被證實是很流行的方法。
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)容溢出則能自動撐開父元素高度
瀏覽器兼容性好，甚至可以調(diào)整支持IE7
同時注意：
需要額外容器
依賴于margin-left: -0.25em的樣式，做到水平居中，需要為不同的字體大小作調(diào)整
內(nèi)容區(qū)聲明的寬度不能大于容器的100% 減去0.25em的寬度
?
Flexbox法
CSS未來發(fā)展的方向就是采用Flexbox這種設(shè)計，解決像垂直居中這種共同的問題。請注意，Flexbox有不止一種辦法居中，他也可以用來分欄，并解決奇奇怪怪的布局問題。
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)良好
可以用于各種高級布局技巧
同時注意： 不支持IE8-9
需要在body上寫樣式，或者需要額外容器
需要各種廠商前綴兼容現(xiàn)代瀏覽器
可能有潛在的性能問題
?
最后的建議
各項技術(shù)都有各自的好處，采取什么樣的方法，取決于你所支持的瀏覽器，以及現(xiàn)有標簽的結(jié)構(gòu)。請使用上面提供對照表幫你選出最符合你需要的方法。
“完全居中”法簡單方便，迅速及時。以前使用負Margin值的地方，都可以使用Absolute居中。無需繁瑣的數(shù)學計算，無需額外標簽，而且可以隨時改變大小。
如果網(wǎng)站需要可變高度的內(nèi)容，而且同時照顧到瀏覽器兼容性的話，可以嘗試table-cell和inline-block技術(shù)，如果想嘗試新鮮事物的話，可以使用Flexbox，并享受這種高級技術(shù)帶來的好處。
========
CSS各種居中方法
http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html水平居中的text-align:center 和 margin:0 auto
?
這兩種方法都是用來水平居中的，前者是針對父元素進行設(shè)置而后者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響，否則一切都是無用功。margin:0 auto
也可以被寫成margin:0 auto 0 auto。不能理解的童鞋們可以自己去找找關(guān)于css縮寫的內(nèi)容。
?
垂直居中的line-height
?
什么？！margin在垂直居中里不起作用了？顯然事情確實如此，我們僅有margin:0 auto的用法而沒有auto 0的情況。至于line-height，他也是作用在父元素上，當他的值等于父元素的height值時
，內(nèi)部的文字就會自動的垂直居中了。此處好像僅僅只能是文字而已，遺憾。
?
萬能的position大法
?
這個方法可以說真的是萬能的。當你為一個元素無法居中而困擾的時候，可以果斷的使用他，而且?guī)缀鯖]有后遺癥，絕對是前端工程師們居家旅行必備的手段之一。
?
具體的做法很簡單，首先給父元素寫上positon:relative，這么做是為了給子元素打上position:absolute的時候不會被定位到外太空去。接下去，寫上子元素的height和width，這個似乎是必須的
，某些瀏覽器在解析的時候如果沒有這2個值的話會出現(xiàn)意想不到的錯位。接著就是整個方法的核心，給子元素再打上top:50%;left:50%以及margin-top:一半的height值的的負數(shù);
margin- left:一半的weight值的負數(shù)。整理一下之后，可能你會給你的子元素寫上這樣的css（當然，父元素也要先寫上width和height）
{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}
?
接下去就刷新頁面吧，你的子元素已經(jīng)是居中顯示了。
?
使用這個方法的好處在于無論你是什么形式的內(nèi)容都可以馬上居中，而缺點就是必須對元素有確定的寬高值，否則的話可能就需要通過javascript來進行一些小計算了。
========
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è)計 ? 評論數(shù) 1 ? 被圍觀 306+
利用CSS進行元素的水平居中，比較簡單，行級元素設(shè)置其父元素的text-align center，塊級元素設(shè)置其本身的left 和 right margins為auto即可。本文收集了六種利用css進行元素的垂直居中的方法，每一種適用于不同的情況，在實際的使用過程中選擇某一種方法即可。
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
適用：塊級元素，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時不能正常工作，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;
}
以上就是六種方法，可以在實際的使用過程中合理選擇，參考文章《vertical-centering》。
就簡單明了說咋用就行了唄，最煩這種6種、8種、N種的解決方法，一種也用不了。
========
盤點8種CSS實現(xiàn)垂直居中水平居中的絕對定位居中技術(shù)
http://blog.csdn.net/freshlover/article/details/11579669Ⅰ.絕對定位居中(Absolute Centering)技術(shù)
我們經(jīng)常用margin:0 auto來實現(xiàn)水平居中，而一直認為margin:auto不能實現(xiàn)垂直居中……實際上，實現(xiàn)垂直居中僅需要聲明元素高度和下面的CSS:
[css] view plain copy
.Absolute-Center { ?
? margin: auto; ?
? position: absolute; ?
? top: 0; left: 0; bottom: 0; right: 0; ?
} ?
我不是這種實現(xiàn)方法的第一人，可能這只是非常常見的一種小技術(shù)，我斗膽將其命名為絕對居中(Absolute Centering)，雖然如此，但是大多數(shù)討論垂直居中的文章卻從來不提這種方法，直到我最近瀏覽《How to Center Anything WithCSS》這篇文章的評論時候才發(fā)現(xiàn)這種用法。在評論列表中Simon和Priit都提及了此方法。
如果你有任何擴展的功能或建議，可以在此跟帖：
CodePen
SmashingMagazine
Twitter @shshaw
優(yōu)點：
1.支持跨瀏覽器，包括IE8-IE10.
2.無需其他特殊標記，CSS代碼量少
3.支持百分比%屬性值和min-/max-屬性
4.只用這一個類可實現(xiàn)任何內(nèi)容塊居中
5.不論是否設(shè)置padding都可居中（在不使用box-sizing屬性的前提下）
6.內(nèi)容塊可以被重繪。
7.完美支持圖片居中。
缺點：
1.必須聲明高度（查看可變高度Variable Height）。
2.建議設(shè)置overflow:auto來防止內(nèi)容越界溢出。（查看溢出Overflow）。
3.在Windows Phone設(shè)備上不起作用。
瀏覽器兼容性：
Chrome,Firefox, Safari, Mobile Safari, IE8-10.
絕對定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均測試通過。
對比表格：
絕對居中法并不是唯一的實現(xiàn)方法，實現(xiàn)垂直居中還有些其他的方法，并各有各的優(yōu)勢。采用哪種技術(shù)取決于你的瀏覽器是否支持和你使用的語言標記。這個對照表有助于你根據(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
?
解釋：
通過以上描述，絕對居中（AbsoluteCentering）的工作機理可以闡述如下：
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使絕對定位塊跳出了內(nèi)容流，內(nèi)容流中的其余部分渲染時絕對定位部分不進行渲染。
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;將給瀏覽器重新分配一個邊界框，此時該塊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è)置一個高度height或?qū)挾葁idth，能夠防止內(nèi)容塊占據(jù)所有的可用空間，促使瀏覽器根據(jù)新的邊界框重新計算margin:auto
Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.
5、由于內(nèi)容塊被絕對定位，脫離了正常的內(nèi)容流，瀏覽器會給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
這么看來， margin:auto似乎生來就是為絕對居中(Absolute Centering)設(shè)計的，所以絕對居中(Absolute Centering)應該都兼容符合標準的現(xiàn)代瀏覽器。
簡而言之（TL;DR）：絕對定位元素不在普通內(nèi)容流中渲染，因此margin:auto可以使內(nèi)容在通過top: 0; left: 0; bottom: 0;right: 0;設(shè)置的邊界內(nèi)垂直居中。
居中方式：
一、容器內(nèi)（Within Container）
內(nèi)容塊的父容器設(shè)置為position:relative，使用上述絕對居中方式，可以使內(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默認上面的CSS樣式已引用包括進去，在此基礎(chǔ)上只提供額外的類供用戶追加以實現(xiàn)不同的功能。
二、視區(qū)內(nèi)（Within Viewport）
想讓內(nèi)容塊一直停留在可視區(qū)域內(nèi)？將內(nèi)容塊設(shè)置為position:fixed;并設(shè)置一個較大的z-index層疊屬性值。
[css] view plain copy
.Absolute-Center.is-Fixed { ?
? position: fixed; ?
? z-index: 999; ?
} ?
注意：對MobileSafari，若內(nèi)容塊不是放在設(shè)置為position:relative;的父容器中，內(nèi)容塊將垂直居中于整個文檔，而不是可視區(qū)域內(nèi)垂直居中。
三、邊欄 (Offsets)
如果你要設(shè)置一個固頂?shù)念^或增加其他的邊欄，只需要在內(nèi)容塊的樣式中加入像這樣的CSS樣式代碼：top:70px;bottom:auto;由于已經(jīng)聲明了margin:auto;，該內(nèi)容塊將會垂直居中于你通過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; ?
} ?
?
四、響應式/自適應(Responsive)
絕對居中最大的優(yōu)勢應該就是對百分比形式的寬高支持的非常完美。甚至min-width/max-width 和min-height/max-height這些屬性在自適應盒子內(nèi)的表現(xiàn)也和預期很一致。
[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)容塊元素的絕對居中實現(xiàn)。
五、 溢出情況(Overflow)
內(nèi)容高度大于塊元素或容器（視區(qū)viewport或設(shè)為position:relative的父容器）會溢出，這時內(nèi)容可能會顯示到塊與容器的外面，或者被截斷出現(xiàn)顯示不全（分別對應內(nèi)容塊overflow屬性設(shè)置為visible和hidden的表現(xiàn)）。
加上overflow: auto會在內(nèi)容高度超過容器高度的情況下給內(nèi)容塊顯示滾動條而不越界。
[css] view plain copy
.Absolute-Center.is-Overflow { ?
? overflow: auto; ?
} ?
如果內(nèi)容塊自身不設(shè)置任何padding的話，可以設(shè)置max-height: 100%;來保證內(nèi)容高度不超越容器高度。
六、重繪(Resizing)
你可以使用其他class類或JavaScript代碼來重繪內(nèi)容塊同時保證居中，無須手動重新計算中心尺寸。當然，你也可以添加resize屬性來讓用戶拖拽實現(xiàn)內(nèi)容塊的重繪。
絕對居中（Absolute Centering）可以保證內(nèi)容塊始終居中，無論內(nèi)容塊是否重繪。可以通過設(shè)置min-/max-來根據(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動畫屬性transition來實現(xiàn)重繪的窗口之間平滑的過渡。一定要設(shè)置overflow:auto;以防重繪的內(nèi)容塊尺寸小于內(nèi)容的實際尺寸這種情況出現(xiàn)。
絕對居中（AbsoluteCentering）是唯一支持resize:both屬性實現(xiàn)垂直居中的技術(shù)。
注意：
要設(shè)置max-width/max-height屬性來彌補內(nèi)容塊padding，否則可能溢出。
手機瀏覽器和IE8-IE10瀏覽器不支持resize屬性，所以如果對你來說，這部分用戶體驗很必要，務必保證對resizing你的用戶有可行的退路。
聯(lián)合使用resize 和 transition屬性會在用戶重繪時，產(chǎn)生一個transition動畫延遲時間。
七、圖片(Images)
絕對居中（AbsoluteCentering）也適用于圖片。對圖片自身應用class類或CSS樣式，并給圖片添加height:auto樣式，圖片會自適應居中顯示，如果外層容器可以resize則隨著容器的重繪，圖片也相應重繪，始終保持居中。
需要注意的是height:auto雖然對圖片居中有用，但如果是在圖片外層的內(nèi)容塊上應用了height:auto則會產(chǎn)生一些問題：規(guī)則的內(nèi)容塊會被拉伸填充整個容器。這時，我們可以使用可變高度(Variable Height)方式解決這個問題。問題的原因可能是渲染圖片時要計算圖片高度，這就如同你自己定義了圖片高度一樣，瀏覽器得到了圖片高度就不會像其他情況一樣去解析margin:auto垂直居中了。所以我們最好對圖片自身應用這些樣式而不是父元素。
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; ?
} ?
最好是對圖片自身應用此方法，效果如下圖：
八、可變高度（Variable Height）
這種情況下實現(xiàn)絕對居中（AbsoluteCentering）必須要聲明一個高度，不管你是基于百分比的高度還是通過max-height控制的高度，還有，別忘了設(shè)置合適的overflow屬性。對自適應/響應式情景，這種方法很不錯。
與聲明高度效果相同的另一種方法是設(shè)置display:table;這樣無論實際內(nèi)容有多高，內(nèi)容塊都會保持居中。這種方法在一些瀏覽器（如IE/FireFox）上會有問題，我的搭檔Kalley?
在ELL Creative（訪問ellcreative.com ）上寫了一個基于Modernizr插件的檢測函數(shù)，用來檢測瀏覽器是否支持這種居中方法，進一步增強用戶體驗。
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; ?
} ?
缺點：
瀏覽器兼容性不太好，若Modernizr不能滿足你的需求，你需要尋找其他方法解決。
1. ? ? ?與上述重繪(Resizing)情況的方法不兼容
2. ? ? ?Firefox/IE8:使用display:table會使內(nèi)容塊垂直居上，不過水平還是居中的。
3. ? ? ?IE9/10: 使用display:table會使內(nèi)容塊顯示在容器左上角。
4. ? ? ?Mobile Safari:內(nèi)容塊垂直居中；若使用百分比寬度，水平方向居中會稍微偏離中心位置。
Ⅱ.其他居中實現(xiàn)技術(shù)
絕對居中（Absolute Centering）是一種非常不錯的技術(shù)，除此之外還有一些方法可以滿足更多的具體需求，最常見的推薦：NegativeMargins, Transforms,Table-Cell, Inline-Block方式和新出現(xiàn)的Flexbox.方式。這些方法許多文章都有深入講解，這里只做簡單闡述。
九、負外邊距(Negative Margins)
這或許是當前最流行的使用方法。如果塊元素尺寸已知，可以通過以下方式讓內(nèi)容塊居中于容器顯示：
外邊距margin取負數(shù)，大小為width/height（不使用box-sizing: border-box時包括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 */ ?
} ?
測試表明，這是唯一在IE6-IE7上也表現(xiàn)良好的方法。
優(yōu)點：
1. ? ? ?良好的跨瀏覽器特性，兼容IE6-IE7。
2. ? ? ?代碼量少。
缺點：
1. ? ? ?不能自適應。不支持百分比尺寸和min-/max-屬性設(shè)置。
2. ? ? ?內(nèi)容可能溢出容器。
3. ? ? ?邊距大小與padding,和是否定義box-sizing: border-box有關(guān)，計算需要根據(jù)不同情況。
十、變形（Transforms）
這是最簡單的方法，不近能實現(xiàn)絕對居中同樣的效果，也支持聯(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)點：
1. ? ? ?內(nèi)容可變高度
2. ? ? ?代碼量少
缺點：
1. ? ? ?IE8不支持
2. ? ? ?屬性需要寫瀏覽器廠商前綴
3. ? ? ?可能干擾其他transform效果
4. ? ? ?某些情形下會出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象
進一步了解transform實現(xiàn)居中的知識可以參考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》
十一、表格單元格（Table-Cell）
總的說來這可能是最好的居中實現(xiàn)方法，因為內(nèi)容塊高度會隨著實際內(nèi)容的高度變化，瀏覽器對此的兼容性也好。最大的缺點是需要大量額外的標記，需要三層元素讓最內(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)點：
1. ? ? ?高度可變
2. ? ? ?內(nèi)容溢出會將父元素撐開。
3. ? ? ?跨瀏覽器兼容性好。
缺點：
需要額外html標記
了解更多表格單元格實現(xiàn)居中的知識，請參考Roger Johansson發(fā)表在456bereastreet的文章《Flexibleheight vertical centering with CSS, beyond IE7》
十二、行內(nèi)塊元素（Inline-Block）
很受歡迎的一種居中實現(xiàn)方式，基本思想是使用display: inline-block, vertical-align: middle和一個偽元素讓內(nèi)容塊處于容器中央。這個概念的解釋可以參考CSS-Tricks上的文章《Centering in the Unknown》
我這個例子也有一些其他地方見不到的小技巧，有助于解決一些小問題。
如果內(nèi)容塊寬度大于容器寬度，比如放了一個很長的文本，但內(nèi)容塊寬度設(shè)置最大不能超過容器的100%減去0.25em，否則使用偽元素:after內(nèi)容塊會被擠到容器頂部，使用:before內(nèi)容塊會向下偏移100%。
如果你的內(nèi)容塊需要占據(jù)盡可能多的水平空間，可以使用max-width: 99%;（針對較大的容器）或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方式差不多，起初我把這種方式忽略掉了，因為這確實是一種hack方法。不過，無論如何，這是很流行的一種用法，瀏覽器支持的也很好。
優(yōu)點：
1. ? ? ?高度可變
2. ? ? ?內(nèi)容溢出會將父元素撐開。
3. ? ? ?支持跨瀏覽器，也適應于IE7。
缺點：
1.需要一個容器
2.水平居中依賴于margin-left: -0.25em;該尺寸對于不同的字體/字號需要調(diào)整。
3.內(nèi)容塊寬度不能超過容器的100% - 0.25em。
?
更多相關(guān)知識參考ChrisCoyier的文章《Centeringin the Unknown》
十三、Flexbox
這是CSS布局未來的趨勢。Flexbox是css3新增屬性，設(shè)計初衷是為了解決像垂直居中這樣的常見布局問題。相關(guān)的文章如《Centering Elements with Flexbox》
記住Flexbox不只是用于居中，也可以分欄或者解決一些令人抓狂的布局問題。
優(yōu)點：
1.內(nèi)容塊的寬高任意，優(yōu)雅的溢出。
2.可用于更復雜高級的布局技術(shù)中。
缺點：
1. ? ? ?IE8/IE9不支持。
2. ? ? ?Body需要特定的容器和CSS樣式。
3. ? ? ?運行于現(xiàn)代瀏覽器上的代碼需要瀏覽器廠商前綴。
4. ? ? ?表現(xiàn)上可能會有一些問題
有關(guān)Flexbox Centering的文章可以參考David Storey的文章《Designing CSS Layouts WithFlexbox Is As Easy As Pie》
建議：
每種技術(shù)都有其優(yōu)劣之處。你選擇哪一種技術(shù)取決于支持的瀏覽器和你的編碼。使用上面的對照表有助于你做出決定。
作為一種簡單的替代方案，絕對居中(Absolute Centering)技術(shù)表現(xiàn)良好。曾經(jīng)你使用負邊距（Negative Margins）的地方，現(xiàn)在可以用絕對居中(Absolute Centering)替代了。你不再需要處理討厭的邊距計算和額外的標記，而且還能讓內(nèi)容塊自適應大小居中。
如果你的站點需要可變高度的內(nèi)容，可以試試單元格(Table-Cell)和行內(nèi)塊元素(Inline-Block)這兩種方法。如果你處在流血的邊緣，試試Flexbox，體驗一下這一高級布局技術(shù)的好處吧。
========
總結(jié)
- 上一篇： T-SQL游标学习总结
- 下一篇： css hack 学习总结