让DIV在不同分辨率和不同浏览器居中

Deloz,2009年12月3日21时54分54秒,经典代码,评论(0),阅读(554),Via 本站原创

DIV屏幕居中的原理:

把DIV设置为absolute,即绝对定位,然后定位于页面距离顶部和左边50%的位置,

再将DIV向左,向上移动DIV本身宽和高的一半,即margin-left和margin-top,就可以实现水平居中和垂直居中了...

支持不同分辨率下的所有浏览器.....

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{text-align:center;}
#test{
 /*绝对定位*/
 position: absolute;
 border: 1px solid red;
 width:100px;
 height:100px;
 /*垂直居中*/
 top:50%;
 margin-top:-50px;
 /*水平居中*/
 left:50%;
 margin-left:-50px;
}
</style>
</head>

<body>

<div id="test"></div>
</body>
</html>

演示::

提示：你可以先修改部分代码再运行。

相关文章

  • 暂无相关日志
标签:, , ,

转载原创文章请注明,转载自: Deloz.Net [Deloz.Net]
本文地址:http://deloz.net/1000000457.html

评论一下


(支持Ctrl + Enter)