css - div 内的垂直和水平居中对齐

Question

我需要一些帮助。几个小时以来，我一直在努力解决问题，但找不到有效的解决方案。

<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

我想要一个液体标题，其中图像向左对齐，标题向中心对齐，但是两个 em 都必须与高度的中间对齐，如果我增加 img/div 的高度就不行了

Answer 1

不得不添加更多的 div，但它有效。 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%;
}