垂直对齐div的内容

Question

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

因此，基本上'你好测试'应该是在垂直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>

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

您可以了解更多有关flexbox与this excelent article :)