负边距居中法（水平居中、垂直居中）

本法兼容ie、firefox，opera没试过

<style type="text/css">
.box {
 background-color:#000000;
 color:#ccc;
 width:760px;
 height:500px;
 border:1px solid #ccc;
 position:absolute;
 margin:-250px 0px 0px -380px;
 top:50%;
 left:50%
}
h1 { margin:20px;}
h6 { margin:20px; text-align:right;font-size:14px;}
ol { margin:30px; font-size:14px;}
li { margin:10px;}
</style>

<div class="box">
<h1>负边距居中法（水平居中、垂直居中）</h1>
<ol>
 <li>假定容器宽=760px;高=500px;</li>
 <li>设置容器为绝对定位</li>
 <li>水平居中：a.设置左外边距(margin-left)为-380px; b.50%居左(left:50%)</li>
 <li>垂直居中：a.设置上外边距(margin-top)为-250px; b.50%居上(top:50%)</li>
</ol>
<h6>http://www.happyshow.org</h6>
</div>

来源：http://www.happyshow.org/article.asp?id=102

转载于:https://www.cnblogs.com/duanzt/archive/2007/08/30/876362.html