多行文本或未知宽高的图片垂直居中

项目中经常会遇到多行文本或未知宽高的图片垂直居中，同事提供的一种近乎万能的方法，备份下来：

据英国媒体报道，本月10号，自2000年以来历时最长的月全食将发生，全球多个地区如半个非洲、中东地区、包括中国在内的亚洲中部等地区以及澳大利亚西部的人们均可以观察到这次月全食。

#text { width: 400px; height: 400px; border: 1px solid #f00; display: table-cell; vertical-align: middle; position: relative; }
#text .box { *position:absolute; *left: 0; *top: 50%; }
#text .box p { *position: relative; *top: -50%; }

2011年12月14日更新css如下：（支持最外层元素浮动）

.text { width: 400px; height: 400px; border: 1px solid #f00; display: table; vertical-align: middle; text-align: left; *position: relative; }
.text .box { display: table-cell; vertical-align: middle; *position:absolute; *top: 50%; }
.text .box p { *position: relative; *top: -50%; }

demo下载：vertical.zip