最近修改公司一个用户登录页面,需要实现登录框在页面水平,垂直居中.因为才疏学浅,绞尽脑汁才想到利用绝对定位+百分比位置减去自身一半的长宽来实现垂直水平居中的,代码如下;
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 .test{ 9 position:absolute; 10 width:200px; 11 height:200px; 12 background:#999; 13 top:50%; 14 left:50%; 15 margin-top:-100px; 16 margin-left:-100px; 17 </style> 18 </head> 19 20 <body> 21 22 <div class="test"></div> 23 </body> 24 </html>
经测试google,IE8,IE6,火狐,360均有效(其他浏览器应该不用说了吧)
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>