大小不固定的图片,多行文字水平垂直居中

http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%A7%E5%B0%8F%E4%B8%8D%E5%9B%BA%E5%AE%9A%E7%9A%84%E5%9B%BE%E7%89%87%E3%80%81%E5%A4%9A%E8%A1%8C%E6%96%87%E5%AD%97%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

1. 大小固定,多行文字的垂直居中

• 单行文字,很简单,就用height, line-height
• 多行文字,原理就是把文字当成图片来处理,用span包起来,设置文字与图片相同的display属性,inline-block,然后用处理图片相同的方式处理文字居中 .

有几点简要说明：
1.此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；
2.外部div不能使用浮动；
3.外部div高度和文字大小比例1.14为宜；
4.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己试了一下，高度比字体1.5左右的样子；
5.系统原因，我没能够在IE8下测试。

2. 大小不固定,图片的水平垂直居中

• ① 透明gif图片+背景定位的方法
  
• ② display:table-cell和文字大小控制居中(font-size:118px; )这个很大的文字在很多种情况下都出现过
  

• ③ display:inline-block和文字大小控制居中,外加一层a标签并加上inline-block
  
• ④ 透明图片拉伸对齐实现垂直居中显示