Вертикально выровнять содержимое 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 :)