宽高固定的盒子上下左右居中于不定宽高的容器中 

<!DOCTYPE html>
<html>
<head>
</head>
<body id="body">
    <!--
        第一步：设置待定位盒子和宽高值
        第二步：将待定位盒子position设为absolute,使其顶部和左侧定位距离设为父元素高和宽的50%（即：先将盒子定位到“父元素4分之1区域的右下部”）
        第三步：把待定位盒子的margin-top值和margin-left值设为其高度和宽度一半的负值（即：把盒子从右下区域拉回正中间）
    -->

    <div id="div2">
 
    </div>

    <style>
        * {
            margin:0;
            padding:0;
        }

        #body {
            background-color:green;
        }

        #div2 {
            width:300px;
            height:200px;
            background-color:red;

            position:absolute;
            top:50%;
            left:50%;

            margin-top:-100px;
            margin-left:-150px;
        }
    </style>
</body>
</html>

　　

posted @ 2017-01-04 19:44  Arlar  阅读(973)  评论(0)  编辑  收藏  举报