如何水平&垂直中心一个div？ [英] How to horizontal & vertical center a div?

问题描述

以下是源代码：

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

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

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

我想知道如何使div（id inner），horizo​​ntal&垂直中心？我可以水平中心，但不能做一个垂直中心...谢谢。

I would like to know How to make the div (id inner), horizontal & vertical center? I can horizontal center, but can't make a vertical center... Thank you.

推荐答案

内部div可以使用CSS。

If you know the dimensions of the inner div you can use 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 等。

There are other options using display: table-cell and vertical-align: middle etc.

内部div的尺寸，并设置如上所示的负边距。

Other options include JavaScript to dynamically determine the dimensions of the inner div and set the negative margins like above.

这篇关于如何水平&垂直中心一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！