【小知识点】一条线的居中问题

想要实现的效果

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container{
                width: 100%;
                height: 300px;
                position: relative;
                border: 1px solid #FFC0CB;
                box-sizing: border-box;
            }
            .box {
                background: #eee;
                width: 40%;
                height: 200px;
                box-sizing: border-box;
                line-height: 300px;
                margin-top: 50px;
            }
            
            .left {
                float: left;
            }
            
            .right {
                float: right;
            }
            
            .line {
                border-left: 1px solid #ADD8E6;
                height: 100px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                /*left: 50%;
                top: 50%;
                margin-top: -50px;*/
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="box left"></div>
            <div class="line"></div>
            <div class="box right"></div>
        </div>
    </body>

</html>
posted @ 2017-04-17 17:53  winteronlyme  阅读(268)  评论(0)  编辑  收藏  举报