對這文章發表回應

這個問題我很久以前思考過。水平置中當然沒問題， 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 了。所以我想辦法用 div:after 、 line-height 、 white-space : nowrap 兜出了一樣的效果。

下面是我整理出的在 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;
  white-space : nowrap;
  /* IE */
  *font-size : 180px;  /* 200px * 0.8 = 180px */
  *font-family : Arial;
}
div:after {
  content : ".";
  font-size : 1px;
  margin-left : -1px;
  opacity : 0;
}
div img {
  vertical-align : middle;
}

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

 

Firefox 和 Chrome 的部份額外補充兩點︰

1. 如果你有設定 DOCTYPE ，且 DOCTYPE 是 Strict 模式，那其實 div:after 、 white-space : nowrap 都不用寫，把 line-height 和 DIV 高度設一樣就好了。
2. div:after 不直接寫 font-size : 0 ，要寫 font-size : 1px 再寫 margin-left : -1px 和 opacity : 0 是因為 Chrome 不支援 font-size : 0 。

重新整理一份 Strict 模式用的 CSS 方便大家參考：

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

原文出處：只用 CSS 讓圖片在 DIV 中水平垂直都置中 @ Vexed's Blog :: 隨意窩 Xuite日誌