终于找到一种有效的垂直居中方法

时间 2019-12-05

标签终于找到一种有效垂直居中方法繁體版

原文原文链接

今天终于发现了一种有效的垂直居中方法（块级元素里面的块级元素居中），写了个demo试了一下。不过此方法要求父级元素和本身元素都有定位，且本身元素要有明确的高宽。demo以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            background: #EEEEEE;
            width:500px;
            height:500px;
            /*父节点定位可为relative,absolute,fixed*/
            position:relative;
        }
        #child{
            background: #2e6da4;
            /*子节点定位为absolute*/
            position:absolute;
            width:400px;
            height:300px;
            /*设置top，left分别为为50%*/
            top:50%;
            left:50%;
            /*设置margin-top，margin-left分别为高，宽的 负 一半*/
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">
        </div>
    </div>
</body>
</html>

截图以下：
spa

其中原理我还须要体会一下。另外，也求其余的好方法，但愿你们分享~~code