码迷,mamicode.com
首页 > 其他好文 > 详细

使用display:table进行垂直居中

时间:2016-05-31 18:53:32      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:

这个问题,属于常识性的吧,可以了解了解。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>

 

使用display:table进行垂直居中

标签:

原文地址:http://www.cnblogs.com/StruggleStudyhard/p/5546776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!