垂直位于中间的位置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

回答

相关问题