小技巧2 - 负边距居中法

 

 

负边距居中法，是比较实用的一种居中方法，屡用不爽

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负边距居中法</title>
    <style type="text/css">
        body{
            position: relative;
            background-color: #f2f2f2;
            width: 100%;height: 600px;
        }
        .demo{
            background-color: red;
            width: 200px;height: 50px;

            position: absolute;
            left: 50%;top: 50%;
            margin-left: -100px;
            margin-top: -25px;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

 

posted @ 2018-05-05 17:49  民院小青年  阅读(106)  评论(0)  编辑  收藏  举报