css定位练习“十字架“之水平垂直居中

浏览数：143 / 时间：2015年06月09日

1.先看要实现的效果

技术分享

实际的效果图

技术分享

可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。

看实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style>
        body{margin:0;padding:0}
        /*定位父级div水平垂直居中*/
        .body_main{
            width:200px;
            height: 300px;
            background-color: #3091E5;
            margin:-150px 0 0 -100px;
            top:50%;
            left:50%;
            position: absolute;
        }
        /*定位水平div垂直居中*/
        .row_div{
            width:200px;
            height: 50px;
            background-color:#88E500;
            position: absolute;
            top:50%;
            margin:-25px 0 0 0;
        }
        /*定位列div水平居中*/
        .clou_div{
            width:50px;
            height: 300px;
            background-color: #3c510c;
            left:50%;
            position: absolute;
            margin:0 0 0 -25px;
        }
    </style>
</head>
<body>
    <div class="body_main">
        <div class="row_div">横向的div</div>
        <div class="clou_div">竖直的div</div>
    </div>
</body>
</html>