display: table-cell; 元素上下左右居中，子元素无宽高 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            *{
                margin: 0 ;
                padding: 0;
            }
            
    </style>
</head>
<body>
<style type="text/css">
        body{

            width: 100vw;
            height: 100vh;
            display: table-cell;
            vertical-align:middle;
            text-align: center;
        }
        div{
            display: inline-block;
        }

    </style>

        <div class="child">            
            内容 内容 内容 内容 内容 内容 内容 内容 内容
        </div>
</body>
</html>

 

posted @ 2017-06-02 16:12  Jinsuo  阅读(389)  评论(0)  编辑  收藏  举报