如何水平&垂直中心一格 [英] 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)，水平&垂直中心?

How do I make the div (id inner), horizontal & vertical center?

我可以水平居中，但不能垂直居中...

I can horizontal center, but I can't make a vertical center...

推荐答案

如果知道内部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.

其他选项包括JavaScript，以动态确定内部div的尺寸并设置负边距，如先前的答案一样.

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

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