如何垂直对齐DIV和水平中心

时间:2012-02-22 17:19:26

标签: css

有人可以帮助我让div id“loader”漂浮在div类“Window”的中心。感谢。

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

更新*我需要将其置于块的绝对中间位置。让我们说“窗口”类是400px高。如何让“装载机在中心(高度/宽度)浮动?”

5 个答案:

答案 0 :(得分:6)

将以下CSS应用于“loader”:

  • 职位:亲属
  • top:50%
  • 保证金: - {E} px auto auto auto

其中{E}是“装载机”高度的一半

希望这有帮助。

答案 1 :(得分:3)

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

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

答案 2 :(得分:0)

将此添加到您的css:

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

这将使您的左右边距自动计算。

答案 3 :(得分:0)

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;
}

答案 4 :(得分:0)

写下这个:

.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/