父元素未设置固定宽度，子元素水平垂直

网页布局中有可能遇到当父元素需要铺满，不能设置固定宽高，此时一些普通的子元素居中方法会失效

解决方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html, body{
            width: 100%;
            height:100%;
            margin: 0;
            padding: 0;
            background-size: 100% 100%;
        }
        #surface{
            width: 100%;
            height: 100%;
            background-color: #000;
        }
        #core{
            width: 50%;
            height: 12%;
            background-color: #FFFFFF;
            vertical-align: middle;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div id="surface">
    <div id="core">
        
    </div>
</div>
</body>
</html>
版权声明：本文为bruce_zhao1407原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。