如何将外部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;
    }