Позиция div вертикально посередине

Question

Как бы я мог настроить div по горизонтали/вертикали посередине?

Вот мой код до сих пор:

HTML

<div id="outer"> 
    <div id="inner"> 
     <div id="signin_header"> 
     Sign in 
     </div> 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
} 
html { 
    display: table; 
    margin: auto; 
    height: 100%; 
} 
body { 
    display: table-cell; 
} 
#outer { 
    width: 100%; 
    text-align: center; 
    height: 100%; 
} 
#inner { 
    display: inline-block; 
    background-color: rgb(245, 245, 245); 
    background-image: none; 
    background-origin: padding-box; 
    background-size: auto; 
    border-bottom-color: rgb(229, 229, 229); 
    border-bottom-style: solid; 
    border-bottom-width: 1px; 
    border-left-color: rgb(229, 229, 229); 
    border-left-style: solid; 
    border-left-width: 1px; 
    border-right-color: rgb(229, 229, 229); 
    border-right-style: solid; 
    border-right-width: 1px; 
    border-top-color: rgb(229, 229, 229); 
    border-top-style: solid; 
    border-top-width: 1px; 
    display: block; 
    font-family: 'segoe ui', arial, helvetica, sans-serif; 
    font-size: 13px; 
    width: 300px; 
    padding: 25px; 
} 
#signin_header { 
    color: rgb(34, 34, 34); 
    display: block; 
    font-family: 'segoe ui', arial, helvetica, sans-serif; 
    font-size: 16px; 
    font-weight: normal; 
    height: 16px; 
    line-height: 16px; 
    margin-top: 0px; 
    width: 283px; 
    text-align: left; 
} 

Fiddle можно найти здесь

http://jsfiddle.net/yaFeD/

Answer 1

Это то, что вы после этого? Думаю, это то, чего вы хотели?

html, body { 
height: 100%; 
} 
html { 
display: table; 
margin: auto; 
height: 100%; 
} 
body { 
display: table-cell; 
} 
#outer { 
width: 100%; 
text-align: center; 
height: 100%; 
position:relative; 
top:50%; 
bottom:50%; 
} 
#inner { 
display: inline-block; 
background-color: rgb(245, 245, 245); 
background-image: none; 
background-origin: padding-box; 
background-size: auto; 
border-bottom-color: rgb(229, 229, 229); 
border-bottom-style: solid; 
border-bottom-width: 1px; 
border-left-color: rgb(229, 229, 229); 
border-left-style: solid; 
border-left-width: 1px; 
border-right-color: rgb(229, 229, 229); 
border-right-style: solid; 
border-right-width: 1px; 
border-top-color: rgb(229, 229, 229); 
border-top-style: solid; 
border-top-width: 1px; 
display: block; 
font-family: 'segoe ui', arial, helvetica, sans-serif; 
font-size: 13px; 
width: 300px; 
padding: 25px; 
} 
#signin_header { 
color: rgb(34, 34, 34); 
display: block; 
font-family: 'segoe ui', arial, helvetica, sans-serif; 
font-size: 16px; 
font-weight: normal; 
height: 16px; 
line-height: 16px; 
margin-top: 0px; 
width: 283px; 
text-align: left; 
} 

http://jsfiddle.net/EQjHz/

Answer 2

Добавление margin:auto; к внутреннему-div сделает трюк. Если вы хотите только горизонтальное выравнивание, добавьте только margin-left:auto;margin-right:auto;. Аналогично для вертикального выравнивания, добавьте margin-bottom:auto;margin-top:auto;

Answer 3

Предполагая, что вы пытаетесь центрировать Вход DIV (не сам надписи) это новый CSS вам потребуется, испытанные в вашем jsfiddle, используя margin: 0 auto; и position: relative; ваши настройки div в середине этого div.

#signin_header { 
    color: rgb(34, 34, 34); 
    display: block; 
    font-family: 'segoe ui', arial, helvetica, sans-serif; 
    font-size: 16px; 
    font-weight: normal; 
    height: 16px; 
    line-height: 16px; 
    margin: 0 auto; 
    position: relative; 
    width: 283px; 
} 

редактировать: я также принял ваш text-align: left; из