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