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