css - 在 DIV 中居中 DIV？

Question

我需要帮助将一个 DIV 置于一个 DIV 的中心。

我想要一个自动宽度的容器 DIV 来占据整个屏幕的宽度(我们称它为 headerContainer。

在 headerContainer 中，我还想要 3 个 DIV:

• 左 DIV(400 像素宽)
• 中心 DIV(100 像素宽)
• 右侧的 DIV(200 像素宽)。

我希望中心 DIV 直接位于屏幕中间。现在我只能让它在左右 DIV 之间居中。

感谢您的帮助。

Answer 1

CSS:

.leftDiv{
  float: left;
  width: 400px;
}
.rightDiv{
  float: right;
  width: 200px;
}
.centerDiv{
  width: 100px;
  margin: 0 auto;
}

HTML:

<div>
   <div class="leftDiv">left</div>
   <div class="rightDiv">right</div>
   <div class="centerDiv">center</div>
</div>

演示:

代码:http://jsfiddle.net/Xxwrm/6/

全屏:http://jsfiddle.net/Xxwrm/6/show