解讀 CSS 布局之水準垂直居中

直接在标簽對象内加<code>align="center"</code>即可讓對象内圖檔橫向水準居中顯示

align="center"使用方法：

text-align是針對父元素進行設定,隻能對圖檔，按鈕，文字等行内元素(display為inline或inline-block等)起作用，起作用的首要條件是子元素必須沒有被float影響。但要說明的是在ie6、7這兩個奇葩的浏覽器中，它是能對任何元素進行水準居中的

具體來說就是把要居中的元素的margin-left和margin-right都設為auto，此方法隻能進行水準的居中，且對浮動元素或絕對定位元素無效

表格中隻要用到 td(或 th)元素的 <code>align="center"</code> 和 <code>valign="middle"</code> 這兩個屬性就可以完美處理,而且表格預設對它裡面的内容進行垂直居中。在css中控制表格内容的居中可以使用 <code>vertical-align:middle</code>，至于水準居中，css中沒有相對應的屬性的,但在ie6、7中可以用<code>text-align:center</code>對表格裡的元素設定，ie8+及谷歌、火狐等的<code>text-align:center</code>隻對行内元素起作用，對塊狀元素無效

對于不是表格的元素，可以通過display:table-cell 來模拟成一個表格單元格，這樣就可以利用表格很友善的居中特性了

此法隻适用于那些我們已經知道它們的寬度或高度的元素。

絕對定位進行居中的原理是通過把絕對定位元素的left屬性設為50%,此時元素并不居中，而是比向右偏了這個元素寬度的一半，需要使用一個負的margin-left把它拉回到居中的位置，這個負的margin值就取元素寬度的一半

使用這個方法的好處在于無論你是什麼形式的内容都可以馬上居中，而缺點就是必須對元素有确定的寬高值，否則的話可能就需要通過javascript來進行一些小計算了

優點：支援跨浏覽器，包括ie8-ie10。無需其他特殊标記，css代碼量少。支援百分比%屬性值和min-/max-屬性。隻用這一個類可實作任何内容塊居中。不論是否設定padding都可居中（在不使用box-sizing屬性的前提下）。内容塊可以被重繪。完美支援圖檔居中。

缺點：必須聲明寬度。建議設定overflow:auto來防止内容越界溢出。在windows phone裝置上不起作用。

這個是浮動元素水準居中的解決方法，且我們不需要知道元素的寬度

浮動居中的原理是：把浮動元素相對定位到父元素寬度50%的地方後需要他裡面的子元素再用一個相對定位，把那多出的自身一半的寬度拉回來，而因為相對定位正是相對于自身來定位的，是以自身一半的寬度隻要把left 或 right 設為50%就可以得到了，因而不用知道自身的實際寬度是多少

優點是不用知道要居中的元素的寬度，即使這個寬度是不斷變化的也行；缺點是需要一個多餘的元素來包裹要居中的元素

這種方法屬于奇淫技巧，利用button标簽天生外挂的這一技能對其裡面的元素進行居中

flexbox是個很強大的布局子產品，三個屬性就搞定居中，而且不論父容器還是居中元素都可以不定寬高

把文字的line-height設為文字父容器的高度，隻适用于隻有一行文字的情況

絕對定位進行居中的原理是通過把絕對定位元素的top的屬性設為50%,這個時候元素并不是居中的，而是比居中的位置向下偏了這個元素寬度或高度的一半的距離，是以需要使用一個負的margin-top的值來把它拉回到居中的位置，這個負的margin值就取元素寬度或高度的一半

優點：

支援跨浏覽器，包括ie8-ie10。無需其他特殊标記，css代碼量少。支援百分比%屬性值和min-/max-屬性。隻用這一個類可實作任何内容塊居中。不論是否設定padding都可居中（在不使用box-sizing屬性的前提下）。内容塊可以被重繪。完美支援圖檔居中。

缺點：

必須聲明高度。建議設定overflow:auto來防止内容越界溢出。在windows phone裝置上不起作用。

簡而言之：絕對定位元素不在普通内容流中渲染，是以margin:auto可以使内容在通過top: 0; left: 0; bottom: 0;right: 0;設定的邊界内垂直居中