Vertical and Horizontal center align within a div - css

Question

I need some help here. I been trying to get it right for hours and i can't find an efficient solution.
<div id="Header">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'
/>
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
Example of what im trying to do
i want to have a liquid header with an image aligned to the left and a title aligned to the center, but both of em have to align to the middle of the height, no mather if i increase img /div's height

Answer 1

Had to add few more divs but it works. http://jsfiddle.net/74Rnq/23/
HTML:
<div id="Header">
<div class="wrap">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
<div class="text">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
CSS:
#Header {
position: relative;
height: 200px;
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
overflow: auto;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
text-align: center;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#Header .wrap {
display: block;
position: absolute;
width: 100%;
top: 50%;
margin-top: -50px; /* Half of wrap div height */
}
#Header .wrap .text {
position: absolute;
top: 50%;
margin-top: -27.5px; /* Half of text div height */
width: 100%;
}

Answer 2

For modern browsers you can do it via display:table, table-row table cell:
Modify your html like this:
<div id="Header" class="table">
<div class="row">
<div class="cell">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
</div>
<div class="cell main">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
#Header {
background: #DBE6EC;
border-bottom: 1px solid #595959;
position:relative;
padding:15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.table {
display:table;
width:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.cell.main {
width:100%;
}
The updated fiddle is here. This solution won't work in ie7. There is a older workaround for vertical align middle, if you have to support ie7.

Answer 3

Make the container div display: table-cell and each child div display: table-cell. Then you can give the child divs vertical-align: middle and they will always be vertically centered.
HTML:
<div id="Header">
<div id="image">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg' />
</div>
<div id="title">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
and CSS:
#Header {
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
display: table;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#title{
display: table-cell;
vertical-align: middle;
width: 100%;
}
#image{
display: table-cell;
vertical-align: middle;
}
Aaand here's the jsFiddle.