垂直对齐 div 的内容

Question

我想垂直对齐 div.

的内容

所以基本上 'Hello test' 应该在 div 的垂直中心。

.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

您可以为此使用 table 布局：

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

Answer 2

使用这个css

body{
    margin:0 auto;
}
.parent {
    background:blue;
    float:left;
    width:100%
}

.parent div 
{
    text-align:center;
    width:50%;
    margin:0 auto;
}

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

Answer 3

现代 flexbox 解决方案（IE10+ 和所有现代浏览器 supported）：

.parent {
    display: flex;
    align-items: center;
}

DEMO

您可以通过 this excelent article 了解有关 flexbox 的更多信息:)

垂直对齐 div 的内容

Vertically align contents of div

html

css

alignment