利用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}
分类: 电脑/网络 >>程序设计 >>其他编程语言问题描述:
如题
解析:
尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
CSS:
body {padding: 0margin: 0}body,{height: 100%}
#outer {height: 100%overflow: hiddenposition: relativewidth: 100%background:ivory}
#outer[id] {display: tableposition: static}
#middle {position: absolutetop: 50%} /* for explorer only*/
#middle[id] {display: table-cellvertical-align: middleposition: static}
#inner {position: relativetop: -50%width: 400pxmargin: 0 auto} /* for explorer only */
div.greenBorder {border: 1px solid greenbackground-color: ivory}
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
</div>
</div>
</div>
以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。
CSS2选择器#value[id]相当于选择器#value，但是Inter Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。
测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。
<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>
图片你自己随便找一个随便试。
