javascript - 如何在外部div内水平居中内部div？

Question

我需要在另一个 div 中水平居中一个 div

这是我的 HTML 代码：

<div id="outer" class="outerDiv">
    <div id="inner" class="innerDiv">
    </div>
</div>

这是CSS：

.outerDiv {
    width:100px;
    height:100px;
    background:red;
}

.innerDiv {
    width:50px;
    height:50px;
    background:blue; 
    // what to add here ?
}

你可以试试：http: //jsfiddle.net/nggSG/

如何将蓝色 div 水平居中在红色 div 内？

Answer 1

像这样 ：

.innerDiv {
    width:50px;
    height:50px;
    background:blue;
    margin : 0 auto;
   }

Answer 2

.innerDiv {
    margin: auto;
    width:50px;
    height:50px;
    background:blue;
}

水平居中 div

Answer 3

这是您需要做的：

.outerDiv {
    width: 100px; height: 100px;

    background-color: red;
    position: relative;
}

.innerDiv {
    width: 50px; height: 50px;
    top: 25px; left: 25px;

    background: blue;
    position: absolute;
}

如果从内部 div 中减去外部 div 的宽度和高度并除以 2，您就知道需要在内部 div 上移动多少。此外，外部 div必须是position: relative，内部 div必须是position: absolute.

如果您需要更动态的居中解决方案，我一直在使用 Shipp Co ( http://shipp.co/midway ) 的 Midway.js。希望这有帮助！

编辑：jsFiddle - http://jsfiddle.net/5A9sq

Answer 4

这是我的 HTML

<div id="outer" class="outerDiv">
    <div id="inner" class="innerDiv">
      Inner div (centered)
    </div>
</div>

简单的CSS

    .outerDiv{
        width:100%;
        margin:0 auto;
        text-align: center;
        background-color: red;
    }

    .innerDiv{
        width:50%;
        display: inline-block;
        background-color: yellow;
        color: black;
    }