最后感谢raozou分享效果代码! <style type=”text/css”> <!– #middle { background:blue; position:absolute; left:expression((body.clientWidth-50)/2 + “px”); top:expression((body.clientHeight-50)/2 + “px”); width:50px; height:50px; } –> </style> <div id=”middle” align=”absmiddle”></div> <!–absmiddle 图像的中间与同一行中最大元素的中间对齐。 –>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
说明:这段代码没有文档类型和命名空间的申明,我已试过,如果加上,蓝色方快儿将位于顶部且一部分
被浏览器隐藏,大家可以试试!此外,FF不支持expression.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>DIV垂直居中</title> <style type=”text/css”> #menu { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -150px; color:blue; width: 300px; height: 50px; border:solid 1px gray; } </style> </head> <body> <div id=menu>页面水平垂直居中</div> </body> </html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>DIV垂直居中</title> <style type=”text/css”> #menu { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -150px; color:blue; width: 300px; height: 50px; font-weight:bold; border:solid 1px gray; line-height:50px; font-size:20px; text-align:center; } </style> </head> <body> <div id=menu>页面水平垂直居中</div> </body> </html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
