html - 垂直对齐 div 的内容

Question

我想垂直对齐我的 div 的内容。

所以基本上“Hello test”应该垂直放置在 div 的中心。

Demonstration

.parent {
    background:blue;
    float:left;
    width:100%
}

.parent div {
    float:left;
    width:50%;
}

h1 {
    font-size:50px;
    margin:0;
    padding:0;
}

<div class="parent">

<div>
    <h1>hello!</h1>
    <p>test</p>
</div>

<div>
    <img src="http://placehold.it/250x250" />
</div>

</div>

Answer 1

您可以为此使用表格布局:

.parent {
    background:blue;
    width:100%;
    display: table;
}

.parent div {
    display:table-cell;
    vertical-align:middle;
    width:50%;
}

h1 {
    font-size:50px;
    margin:0;
    padding:0;
}

<div class="parent">

<div>
    <h1>hello!</h1>
    <p>test</p>
</div>

<div>
    <img src="http://placehold.it/250x250" />
</div>

</div>