不定高垂直居中

Posted 2020-09-17 薛伟杰

方法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>