垂直居中里的height:font-size ≈ 1:0.893是怎麼來的？

在做垂直居中時有種方法是設置父級的高度與字體大小比例約為1:0.893來兼容IE6/7，即height:font-size ≈ 1:0.893，其中的0.893是怎麼來的？有沒有相關的文章介紹？

.warp {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
*display: block;
*font-size: 178px; /** height:font-size ≈ 1:0.893 **/
border: 2px solid #222;
}
.warp img {
vertical-align:middle;
}


&
&
&

---

國內的出處應該是來自淘寶圓心的博客：

圖片垂直居中的使用技巧

需要注意的是：這是一個實驗數值，隨著字體不同比例有所變化。所以存在很多風險，如果沒有足夠了解，不建議使用。

目前個人推薦更加靠譜的 cube 解決方案，不論是圖片，單行文字還是多行文字，甚至是圖文混排都可垂直居中。最新代碼：cube/layout.css at master · thx/cube · GitHub

/*
*@ Name: 未知高度垂直居中組件
*@ Author: 一絲
*@ Update: 2013-10-13 17:08:36
*@ Usage: 支持圖片，單行或多行文字，以及圖文混排
*/

/* 去除 inline-block 的空隙 */
.center-box {
font-size: 0;
*word-spacing: -1px;
/* IE6、7 */
height: 100%;
/* 繼承父級高度 */
}
/* 修復 Safari 5- inline-block 的空隙 */
@media (-webkit-min-device-pixel-ratio:0) {
.center-box {
letter-spacing: -5px;
}
}
/* 使用空標籤生成一個高度100%的參照元素 */
.center-box .center-hack {
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 0;
width: 0;
height: 100%;
vertical-align: middle;
}


---

我剛開始學前端看到這個方法時也是沒想明白原理，後來明白了，見我文章：《解讀CSS布局之

---

推薦閱讀：