2007-07
22
版权声明：可以任意转载，但转载时必须标明原作者charlee、原始链接http://tech.idv2.com/2007/07/22/center-div-horizontally-and-vertically-with-css/以及本声明。
通常在制作网站首页时需要使页面内容在水平和垂直方向上都居中。 表格布局时代常用的方法是内容之前添加换行。实际上通过CSS有更方便的办法。
这个方法出自creamu.com。 先来看看代码和效果吧。
<style>
#warp {
position: absolute;
width:500px;
height:200px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-100px;
border: solid 3px red;
}
</style>
<body>
<div id=warp>Test</div>
</body>
原理很简单：将left和top设置为50%来定位div到浏览器中央，再将margin-left和margin-top值设置为宽和高的一半， 使div居中显示。
这篇文章有 9 条评论了，快来一起讨论讨论吧！
#2
2007-10-09 23:39
这个办法好, 比嵌套 div 再用 left, top 来定位方便很多.
谢谢 charlee
#3
2007-10-10 01:12
To Neelie:
谢谢评论！
#4
2008-03-13 15:29
margin-left: auto;
margin-right: auto;
这个也行
#5
2008-04-24 13:24
方法好啊.有没有别的方法?
#6
2008-05-01 22:19
这个方法不怎么样，要是用户调整了浏览器的大小呢？
那样你的那个warp还是50%…
这样好？
css运用中最好还是尽量少用%…
#7
2008-05-03 02:36
abc
2008-03-13 15:29
margin-left: auto;
margin-right: auto;
这个也行
#8
2008-05-03 02:37
这个方法很好!简单
margin-left: auto;
margin-right: auto;
这个也行
#9
2008-05-05 14:33
xiaopiao
2008-05-03 02:36
abc
2008-03-13 15:29
margin-left: auto;
margin-right: auto;
这个也行
这个是水平居中吧..要的是垂直怎么居中呢?
添加评论
2007-07-23 12:32
很聪明的办法啊！