利用vertical-align:middle和dispaly: table在高级版本的浏览器实现效果
布局div：
未添加样式的效果图：
添加CSS样式效果：
最终实现的效果：
在IE6 7 下的方案 ：
/*IE6*/
*html .wrapper{position:absolutetop:50%width:100%text-align:centerdisplay:blockheight:auto}
*html .subwrap{position:relativetop:-50%text-align:center}
/*IE7 可以合并 但是为了更好说明 没有合并*/
*+html .wrapper{position:absolutetop:50%width:100%text-align:centerdisplay:blockheight:auto}
*+html .subwrap{position:relativetop:-50%text-align:center}
<style>*{ margin:0 padding:0 float:none}
li { list-style:none}
/*关键样式*/
.zxx_align_box_2{display:table-cell width:500px height:200px padding:0 10px border:4px solid #beceeb color:#069 font-size:10em text-align:center vertical-align:middle}
.zxx_align_box_2 .zxx_align_word{display:inline-block line-height:24px font-size:12px vertical-align:middle text-align:left}
.zxx_align_box_2 span img{ max-width:500px max-height:200px *width:expression(document.documentElement.offsetWidth>500?500:auto)*height:expression(document.documentElement.offsetHeight>200?200:auto)}
</style> <div class="zxx_align_box_2"><span class="zxx_align_word">无论是单行还是多行，都可以居中显示无论是单行还是多行，都可以居中显示无论是单行还是多行，都可以居中显示无论是单行还是多行，都可以居中显示无论是单行还是多行，都可以居中显示无论是单行还是多行，都可以居中显示无论是单行还是多行，都可以居中显示<span style=" color:#c00">,注：可根据需要改变尺寸边框即可,内容文字大小、图片大小随便放，但是有一点，不能混放啊，如非得走这路，那非得用JS了，css再强大也是有限的。</span></span></div>
<div class="zxx_align_box_2"><span class="zxx_align_word"><a href="#"><img src="image/expression.png" /> </a></span></div>
图片你自己随便找一个随便试。
