利用translate实现垂直居中

2017-06-30

阅读 1 分钟

<!DOCTYPE html>
<html>
    <head>
        <title>居中</title>
        <style type="text/css">
            .parent{
                width:100px;
                height:80px;
                /*父元素需设置position:relative/absolute/fixed;*/
                position:relative;
                background: #eee;
            }
            .children{
                background:green;
                /*子元素的宽高可以是具体值，也可以是百分比，也可以是auto*/
                width:50px;
                height:50px;
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="children">
            </div>
        </div>
    </body>
</html>

截图如下：