Div垂直竖直方向居中方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Document</title>
    <style type="text/css" media="screen">
    .father{
        position:fixed;
        width:100%;
        height:100%;
        top:0;
        left:0;
        background-color:rgba(0,0,0,.7);
    }
    .son{
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        width:80%;
        height:50%;
        margin:auto;
        border-radius: 5px;
        background-color:#ffffff;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

推荐阅读更多精彩内容