[memo] 只用 CSS 讓圖片在 DIV 中水平垂直都置中

原文出處: http://blog.xuite.net/vexed/tech/22551671-%E5%8F%AA%E7%94%A8+CSS+%E8%AE%93%E5%9C%96%E7%89%87%E5%9C%A8+DIV+%E4%B8%AD%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E9%83%BD%E7%BD%AE%E4%B8%AD

這個問題我很久以前思考過。水平置中當然沒問題， text-align : center 就好了。在 Firefox 和 Chrome 垂直置中也沒啥問題，因為 CSS 支援完整，可以動手腳的地方多。難的是在 IE 垂直置中。之前我想不到好的純 CSS 解法，所以最後我在 img onload 上註冊一個 handler ，動態算出 margin-top ，讓圖片垂直置中。

現在工作上又碰到這個問題，又開始苦思有沒有好的純 CSS 解法。結果在大陸找到這個網頁 - 圖片垂直居中的使用技巧。只能說太神了 ｍ(__ __)ｍ，這種解法我應該一輩子也想不出來吧。老實講我只約略知道為什麼可以這樣解，實際上的原理還是不太懂。

他的方式是抓出特定字型在 IE font-size 和所產生行高的比例，然後就以此比例來算出要垂直置中 font-size 該設多少。他算出來字型 Arial 的比例是 0.873 ，但我算出來約是 0.9 左右。所以要讓一張圖在 IE 高度 200px 的 DIV 中垂直置中就要把 font-family 設為 Arial 、 font-size 設為 200px * 0.9 = 180px 。

再來講講大陸網頁的 Firefox 部份，他用 display : table-cell 讓圖片在 Firefox 垂直置中，我不太喜歡 :p ，因為這樣 DIV 就不能 float : left 或 float : right 了。所以我用 line-height 兜出了一樣的效果。

下面是我整理出的在 IE 、 Firefox 、 Chrome 都可以跑的範例︰

Demo

HTML

<div><img src="demo.jpg" />div>

CSS

div {
  background-color : #EEE;
    
  height : 200px;
  width : 200px;
    
  text-align : center;
    
  /* Firefox, Chrome */
  line-height : 200px;
    
  /* IE */
  *font-size : 180px;  /* 200px * 0.9 = 180px */
  *font-family : Arial;
}

div img {
  vertical-align : middle;
}

下面是和 float : left 搭配的 Demo ︰

 

如果你的網頁的 DOCTYPE 不是 Standards 模式，或是沒有寫 DOCTYPE ，那會麻煩些，要多寫些 CSS ：

div {
  background-color : #EEE;
    
  height : 200px;
  width : 200px;
    
  text-align : center;
    
  /* Firefox, Chrome */
  line-height : 200px;
  white-space : nowrap;
    
  /* IE */
  *font-size : 180px;  /* 200px * 0.9 = 180px */
  *font-family : Arial;
}

div:after {
  content : ".";
  font-size : 0;
  -webkit-text-size-adjust : none;
}

div img {
  vertical-align : middle;
}

div:after -webkit-text-size-adjust : none 是為了讓 Chrome 支援 font-size : 0 。