Вертикальное и горизонтальное выравнивание всего содержимого и элементов внутри div

Question

У меня есть div с некоторым контентом, в данном случае 2 кнопки и абзац. Я хочу вертикально и горизонтально выровнять все элементы и содержимое внутри этого div, изменив его CSS. Как я могу это сделать?

<style> 
    .middle { 
    What to type in here? 
    } 
</style> 

<div class="middle"> 
    <p>Hello</p> 
    <br /> 
    <input type="button" value="Button 1"> 
    <br /> 
    <input type="button" value="Button 2"> 
</div> 

Answer 1

Проверить этот стиль:

/* stretch them to window's height */ 
html, body { 
    height:100%; 
} 

/* normalize them from default 8px to zero */ 
html, body, div, p { 
    margin:0; 
    padding:0; 
} 

/* vertical align */ 
body { 
    display:table; 
    width:100%; 
    overflow:auto; 
} 
.middle { 
    display:table-cell; 
    vertical-align:middle; 
} 

/* horizontal align */ 
.middle { 
    text-align:center; 
} 

jsfiddle #1

В качестве альтернативы вы можете поместить все ваши HTML-код в какой-нибудь контейнер div и стилизовать его вместо body тега:

jsfiddle #2

Для полноты, самый простой стиль, где сосредоточено содержание .middle деления и высота .middle также зависит от его внутреннего содержания могут быть сделаны с равными верхними и нижними отступами следующим образом:

.middle { 
    padding:5em 0; 
    text-align:center; 
} 

jsfiddle #3

Answer 2

Изменить HTML на это:

<div class="middle"> 
    <div id='mydiv'> 
     <p>Hello</p> 
     <input type="button" value="Button 1" /> 
     <input type="button" value="Button 2" /> 
    </div> 
</div> 

И ваш CSS для

.middle 
{ 
padding: 0; 
} 

#mydiv 
{ 
display: table; 
margin: 0 auto; 
} 

#mydiv * 
{ 
display: block; 
} 

input[type='button'] 
{ 
margin: 0; 
} 

Работа скрипку: http://jsfiddle.net/n6522/1/

PS. Граница и ширина просто для того, чтобы дать вам представление. Вам не нужно добавлять первый блок.