How to vertically align banner in middle inside a wrapper

Question

I need to vertically align the banner in middle based on the height of the container div. I tried but it is not aligning

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

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

Answer 1

An option is applying display:table to container, and display:table-cell and vertical-align:middle to child, like so:

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;
}

Updated JS Fiddle:

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

Answer 2

add to .wrapper a line-height and text-align like that :

the line-height based on wrapper height

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

JS FIDDLE

https://jsfiddle.net/aypye6g3/

IMAGE

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
}