html登陆框怎么居中,HTML背景图片 和 登陆框 如何（上下居中）

尽管有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%;}   /*   for   explorer   only*/

#middle[id]   {display:   table-cell;   vertical-align:   middle;   position:   static;}

#inner   {position:   relative;   top:   -50%;width:   400px;margin:   0   auto;}   /*   for   explorer   only   */

div.greenBorder   {border:   1px   solid   green;   background-color:   ivory;}

xhtml

以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。

CSS2选择器#value[id]相当于选择器#value，但是Internet   Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。

测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。

作者: power_zl

发布时间: 2007-07-16