负边距,负外边距水平,垂直居中方法


<style type="text/css">
.box {
    background-color:#000000;
    color:#ccc;
    width:760px;
    height:500px;
    border:1px solid #ccc;
    position:absolute;
  margin-left:-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>
posted @ 2008-02-15 10:26  looping  阅读(640)  评论(0编辑  收藏  举报