如何在包装器内部的中间垂直对齐横幅

Question

我需要根据容器div的高度在中间垂直对齐横幅。 我试过了但是没有对齐

<div id="left-ad">
    <div id="sidebar"> <a href="#"><img src="sidewall.png" alt="LEft Banner" ></a>

    </div>
</div>
<div class="right-ad"> <a href="#"><img src="wad.jpg" alt="Right Banner" style="border-width: 0px" ></a>

</div>
<div class=wrapper>//center body part</div>

小提琴： http : //fiddle.jshell.net/6w7dvbzd/

Answer 1

一个选项是将display：table应用于容器，将display：table-cell和vertical-align：middle应用于子对象，如下所示：

HTML：

<div class=wrapper>
    <div class="content">Content</div>
</div>

CSS：

.wrapper {
    display: table;
}

.wrapper .content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

更新了JS Fiddle：

http://fiddle.jshell.net/6w7dvbzd/1/

Answer 2

向.wrapper添加这样的line-height和text-align：

基于包装器高度的行高

.wrapper {
    width:200px;
    margin:0 auto;
    background-color:blue;
    height:150px;
    line-height:150px;
    text-align:center; }

JS菲德尔

https://jsfiddle.net/aypye6g3/

图片

Answer 3

HTML：

<div class="wraper">
  <img src=image src"/>
</div>

CSS：

.wraper{  
    position: relative
    height: 160px;
    width: 160px;
    }
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto
}