负边距居中法(水平居中、垂直居中)

本法兼容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
posted @ 2007-08-30 21:38  fisherman  阅读(570)  评论(0编辑  收藏  举报