how to vertically align div opposite to each other - html

Question

I have placed two div opposite to each other using display:inline-block, now i want the div at right side should be centered with respect to left side div.
I have tried using following,
HTML:
<div class="header_first_above">
<div class="first_above">
<div class="logo">
<p><img src="assets/img/logo_new.jpg" /></p>
</div>
<div class="icons">
sd
</div>
</div>
</div>
CSS:
.header_first_above {
width: 90%;
height: 150px;
background: #FFFFFF;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
left: 5%;
margin: 0 auto;
top: 0;
-moz-box-shadow: 0 0 15px #ccc;
-webkit-box-shadow: 0 0 15px #ccc;
box-shadow: 0 0 15px #ccc;
}
.header_first_above .first_above {
width: 100%;
}
.header_first_above .first_above .logo {
width: 20%;
padding: 10px;
display: inline-block;
}
.header_first_above .first_above .icons {
width: 77%;
display: inline-block;
color: red;
text-align: right;
background: #F1B0B1;
position: absolute;
margin: 0;
top: 10%;
}
current output,
required output,
How to make this. I have tried a lot.

Answer 1

One solution is to use display:table
http://jsbin.com/sulopikuso/1/edit?html,css,output
Another solution is to use display:flex
http://jsbin.com/yififomiso/edit?html,css,output
In case of using Flex version be aware of browser support http://caniuse.com/#search=flexbox and it's vendor prefixes.

Answer 2

You can remove position:absolute and use css calc for calculating the width of .icons and don't forget to remove extra spaces which is occurred by display:inline-block;
Jsfiddle
.header_first_above {
width: 90%;
height: 150px;
background: #FFFFFF;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
left: 5%;
margin: 0 auto;
top: 0;
-moz-box-shadow: 0 0 15px #ccc;
-webkit-box-shadow: 0 0 15px #ccc;
box-shadow: 0 0 15px #ccc;
}
.header_first_above .first_above {
width: 100%;
}
.header_first_above .first_above .logo {
width: 20%;
padding: 10px;
display: inline-block;
background-color: red;
}
.header_first_above .first_above .icons {
width: calc(100% - 20% - 20px);
display: inline-block;
color: red;
text-align: right;
background: #F1B0B1;
margin: 0;
}
<div class="header_first_above">
<div class="first_above">
<div class="logo">
<p>
<img src="assets/img/logo_new.jpg" />
</p>
</div><!--
--><div class="icons">
sd
</div>
</div>
</div>

Answer 3

If you know the height of the div you want vertically centered, one trick you can use is absolute or relative positioning with a negative top margin as so:
.header_first_above .first_above .icons {
position: relative;
top: 50%;
height: 150px;
margin-top: -75px;
}