使用display:table进行垂直居中

这个问题，属于常识性的吧，可以了解了解。demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table-cell垂直居中</title>
<style type="text/css">
    *{margin:0;padding:0;border:0;}
    body,html{width:100%;height:100%;}
.ston_wrap{width:100%;height:100%;display: table;}
.ston_box{width:600px;margin:0 auto;height: 100%;}
.ston_content{display: table-cell;vertical-align: middle;background: #fcc;border:1px solid #fff;}

</style>

</head>
<body>
<div class="ston_box">
    <div class="ston_wrap">
        <div class="ston_content">
            <h1>内容1</h1>
            <h1>内容2</h1>
            <h1>内容3</h1>
            <h1>内容4</h1>
            <h1>内容5</h1>
            <h1>内容6</h1>
            <h1>内容7</h1>
            <h1>内容8</h1>
            <h1>内容9</h1>
            <h1>内容1</h1>
        </div>
    </div>
</div>
</body>
</html>

 

posted on 2016-05-31 17:50  Newbies  阅读(356)  评论(0)    收藏  举报

导航