如何垂直和水平居中對齊DIV

Question

有人可以幫助我讓div id“loader”漂浮在div類“Window”的中心。 謝謝。

<div id="someid" class="Window">
   <div id="loader"></div>
</div>

更新*我需要將它放在一個塊的絕對中間。 讓我們說“窗口”類是400px高。 如何讓“裝載機浮在中心（高度/寬度）”？

Answer 1

將以下CSS應用於“loader”：

• 位置：相對
• 最高：50％
• 保證金： - {E} px auto auto auto

其中{E}是“裝載機”高度的一半

希望這可以幫助。

Answer 2

#someid.Window{
   // give this some width
   width: 100%
}

#loader{
    // give width and margin auto on the sides
    width: 100px;
    margin: 0 auto;
}

Answer 3

將此添加到您的CSS：

#loader {
  width: 123px;
  margin:0 auto;
}

這將使您的左右邊距自動計算。

Answer 4

http://jsfiddle.net/sfKR2/

#someid {
    width:200px;
    height:200px;
}
#loader {
    position: relative;
    height:80px;
    width: 80px;
    top: 50%;
    margin-top: -40px; /* half of the height */
    margin-left: auto;
    margin-right: auto;
}

Answer 5

寫這個：

.window{
    height:400px;
    width:400px;
    background:red;
    vertical-align:middle;
    line-height:400px;
    text-align:center;
}
#loader{
    width:20px;
    height:20px;
    background:green;
    display:inline-block;
    vertical-align:middle;
}

檢查這個http://jsfiddle.net/dxPfz/