死活要居中（轉載）

轉載自：http://lucifier129.github.io/lab/center.html

 

你可能在別的地方聽過「水平垂直居中的 N 種辦法」，但在這裏，只會認真介紹一種。基於它的特性，這種定位策略能夠叫作「死活要居中」。

---

• 圖片水平垂直自適應居中：

  這是一個在 CSS 中比較困難的問題。主要難點在於 IE6 和 IE7 不支持 display 的 table-cell 屬性，通常經過 line-height 的值來模擬；但也只能實現容器定高的狀況。

  看看「死活要居中」技術，可否通吃 IE6+，歡迎在各個瀏覽器中測試如下場景：

  測試方式：點擊圖片，移動鼠標，進行縮放；再次點擊圖片，則取消。

• 多行文字水平垂直自適應居中：

  單行文字的水平垂直居中，太過簡單，沒必要多言；多行文字時的處理方式，就沒那麼容易了。

  然而，這對「死活要居中」技術來講，垂手可得。在該死的 IE6 與 IE7 中盡情測試吧

  我是一堆文字，不斷增加的文字。個人父元素寬度爲其父元素的60%。

  測試方式：點擊文本框，每一個1秒，複製一次初始值；再次點擊時取消。

• 普通塊級元素水平垂直自適應居中：

  這個應該是最經典的場景。「死活要居中」一樣適用。

   

  測試方式：點擊色塊，移動鼠標，進行縮放；再次點擊色塊，則取消。

• 一列與多列行內塊級元素水平垂直自適應居中：

  這種需求，是升級版的多行文字水平垂直居中，有時它會帶來巨大麻煩。然而，「死活要居中」仍然表現得遊刃有餘。

   

  測試方式：點擊色塊容器，每一個1秒，複製一次色塊；再次點擊時取消。雙擊時，添加左浮動類名，再次雙擊是，則取消。

---

儘管上面的案例使用了一些 js，但它都與水平垂直自適應居中無關，僅僅添加節點或者改變元素的寬高罷。

案例有限，只反映了在固定寬高的容器內，元素的水平垂直自適應居中的狀況。然而實際上，「死活要居中」策略也適用於容器寬高變化不定的狀況。可在開放者工具中直接修改容器的尺寸，可見其效。

CSS實現原理：

總共須要三層元素。在支持 display 的 table 和 tabel-cell 的瀏覽器中，最外層爲 display: table, 第二層爲 display: table-cell; vertical-align: middle; 就能作到垂直居中。剩下的，當最裏層爲行內元素時，最外層設置 text-align 的值爲 center 即水平居中。當最裏層爲塊級元素時，其 margin 值爲 0 auto 即水平居中。到這裏，都是經典方案。

接下來，要對 IE6 和 IE7 作 hack 處理。知識點爲：margin 的 關鍵字 auto。

通常狀況下咱們用它來實現塊級元素的水平居中；由於默認狀況下，文檔的書寫模式 writing-mode 是從左到右，遇邊界則考慮折行，從上之下無限延展。左右有界，上下無邊，auto 能根據左右之間明確的界限分配空間，而上下則不行，默認爲 0。

當咱們將書寫模式改變爲，從上到下，從右至左，像中國古詩詞那樣的排版方式時，auto 值就能上下均分剩餘空間，左右的 auto 值則默認爲0。

hack 方式呼之欲出，將最外層的書寫模式設置爲 writing-mode：tb-rl；第二層的 margin 設置爲 auto 0；而後將書寫模式恢復通常狀態 writing-mode:lr-tb; 如此，第二層負責垂直居中，最裏層負責水平居中，即大功告成。

將兩種寫法合併成公共類，就獲得了「死活要居中」的 CSS 寫法，以下圖：

這種 hack 並不是完美，也有反作用。

其一是，IE6 下背景圖居中時，各類凌亂，若是你用了「死活要居中」，而且還須要設置背景圖，最好的方法是在外部再包裹一層，不要將背景圖放在書寫模式非正常的元素中。若是你要兼容 IE6 的話。

其二是，在 IE6 和 IE7 中，即使最裏層是塊級元素，最外層的 text-align: center; 也能讓它居中，有時這未必是咱們要的效果。

還有其餘一些問題，有待你們一塊兒發掘。總的而言，「死活要居中」方案，可以勝任大多數場景，是爲不錯的選擇。若是對該方法的使用細節還有疑問，請直接查看本文源碼。

做者：Jade

轉載請註明出處。