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

不定高垂直居中

时间:2017-05-12 14:28:03      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:min   bsp   blog   code   垂直   cal   方法   auto   ddl   

方法1:通过添加display:table-cell实现

 1 .content{
 2     width: 100%;
 3     border: 1px solid red;
 4     min-height: 300px;
 5     text-align: center;
 6     display: table;
 7 }
 8 .content .con1{
 9     display: table-cell;
10     vertical-align: middle;
11 }
12 <div class="content">
13     <div class="con1">
14         <img src="1.jpg" />
15     </div>
16 </div>

方法2:通过添加position实现

.content{
    width: 100%;
    border: 1px solid red;
    min-height: 300px;
    text-align: center;
    position: relative;
}
.content .con2{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

<div class="content">
    <img class="con2" src="1.jpg" />
</div>

 

不定高垂直居中

标签:min   bsp   blog   code   垂直   cal   方法   auto   ddl   

原文地址:http://www.cnblogs.com/xueweijie/p/6845322.html

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