垂直位於中間的位置div

我該如何在中間水平/垂直設置一個div？垂直位於中間的位置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; 
}

小提琴可以在這裏找到

http://jsfiddle.net/yaFeD/

來源

2013-03-07 methuselah

這是你以後在做什麼？我想這就是你想要的？

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/

來源

2013-03-07 17:49:31 Cloak

將margin:auto;添加到內部的div將做的伎倆。當您只想要水平對齊時，只能添加margin-left:auto;margin-right:auto;。同樣，對於垂直排列，添加margin-bottom:auto;margin-top:auto;

來源

2013-03-07 17:41:19 devnomore

假設你正在試圖居中登錄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;出

來源

2013-03-07 17:42:33

我試圖居中實際DIV – methuselah 2013-03-07 17:45:48

權，即實現爲中心的DIV本身，其實它把它直接在中間，中心的水平和垂直。如果你想讓你的文本保持與div左邊對齊，你仍然可以保留它，我只是假定你想讓文本居中以及他的div居中。 – 2013-03-07 17:48:02

垂直位於中間的位置div

回答

相關問題