学习下CSS办理未知高度垂直居中办法2

你可能会说，好多英文看不懂，不过我告诉你，很抱歉那三个英文你必须记住，而且是最重要的三个，你可以把这么个盒子看成一个DIV，而所有标签都带有这三个属性。只管有CSS的vertical-align特征，可是其实不能无效办理未知高度的垂直居中成绩（在一个DIV标签里有未知高度的文本或图片的情形下）。

尺度扫瞄器如Mozilla,Opera,Safari等.，可将父级元素显现体例设定为TABLE(display:table;)，外部子元素定为table-cell(display:table-cell),经由过程vertical-align特征使其垂直居中，但非尺度扫瞄器是不撑持的。

非尺度扫瞄器只能在子元素里设距顶部50%，内里再套个元素距顶部-50%来抵消。

CSS

body{padding:0;margin:0;}
body,html{height:100%;}
#outer{height:100%;overflow:hidden;position:relative;width:100%;background:ivory;}
#outer[id]{display:table;position:static;}
#middle{position:absolute;top:50%;}/*forexploreronly*/
#middle[id]{display:table-cell;vertical-align:middle;position:static;}
#inner{position:relative;top:-50%;width:400px;margin:0auto;}/*forexploreronly*/
div.greenBorder{border:1pxsolidgreen;background-color:ivory;}

xhtml

<divid="outer">
<divid="middle">
<divid="inner"class="greenBorder">
</div>
</div>
</div>

以上CSS代码的长处是没有hacks，接纳了IE不撑持的CSS2选择器#value[id]。

CSS2选择器#value[id]相称于选择器#value，可是InternetExplorer不撑持这类范例的选择器。一样地.value[class]，相称于.value,这些只要尺度扫瞄器能读懂。

测试：Firefox1.5、Opera9.0、IE6.0、IE5.0经由过程。


切入正题，其实DIV+CSS正确的说法应该是XHTML+CSS，说成DIV的原因只是让它能更明确地和TABLE布局方法区分开来，并不是说一个页面里没有TABLE，而是在什么地方使用TABLE，你要认识到TABLE是表格，是存放数据用的，而不是用来布局的。