div如何横向和纵向居中？

Question

这是源代码:

<div id = "outer">
     <div id="top">
     ....
     </div>

     <div id="inner">
     ....
     </div>

     <div id="bottom">
     ....
     </div>     
</div>

我想知道如何制作div(内部),水平和垂直中心？我可以横向居中,但不能做垂直中心......谢谢.

Answer 1

如果你知道内部div的尺寸,你可以使用CSS.

#outer {
    position: relative;
}

#inner {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

还有使用其他选项display: table-cell和vertical-align: middle等.

其他选项包括JavaScript,以动态确定内部div的尺寸,并设置如上所述的负边距.

Answer 2

使用javaScript或尝试使用http://www.jakpsatweb.cz/css/css-vertical-center-solution.html