Как центрировать выравнивание текста в div

Question

Я хотел бы центрировать выравнивание текста как по вертикали, так и по горизонтали внутри этого div. Таким образом, он имеет равную надпись сверху и снизу.

Как это сделать с моим текущим кодом? мой Fiddle: http://jsfiddle.net/hr2aLrc0/

<div style="height:300px;background:url('http://placehold.it/600x300') 0 0 no-repeat;background-size:cover"> 
 
    
 
    <h1>Your Title</h1> 
 
    <p>Title<br />Description</p> 
 
    
 
</div>

Answer 1

Это стандартный вопрос так сомнение, что там нет дубликатов. ;-)

Расширьте стиль/класс с text-align: center;

<div style="text-align: center; height:300px;background:url('http://placehold.it/600x300') 0 0 no-repeat;background-size:cover"> 

    <h1>Your Title</h1> 
    <p>Title<br />Description</p> 

</div> 

Вертикальное выравнивание не так просто.

Это может быть сделано с помощью java-скрипта или если вы оберните свой div в position: absolute стилизованным div с top: 0px и bottom: 0px;. Затем вы можете использовать margin-top: auto; margin-bottom: auto; height: ???px для центрирования внутреннего div.

<div style="position: absolute; top: 0; bottom: 0; left:0; right:0; height: auto; width: auto;"> 
    <div style="margin-top: auto; margin-bottom:auto; text-align: center; height:300px;background:url('http://placehold.it/600x300') 0 0 no-repeat;background-size:cover"> 

    <h1>Your Title</h1> 
    <p>Title<br />Description</p> 

    </div> 
</div> 

Answer 2

Попробуйте это:

div { 
 
    width: 250px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    text-align: center; 
 
}

<div style="height:300px;background:url('http://placehold.it/600x300') 0 0 no-repeat;background-size:cover"> 
 
    
 
    <h1>Your Title</h1> 
 
    <p>Title<br />Description</p> 
 
    
 
</div>