CSS - 如何在div中居中div？

Question

我有一个800px宽的外部div。我有一个内部div，可以是200到600px宽。

如果我将内部div设置为具有特定宽度，我知道如何将内部div放在外部div中心，但是如何将其居中，因为它的宽度可变？

有没有办法将div设置为仅为其内部元素的宽度，而不是将其展开以填充其包含的div？

Answer 1

浮动，显示：内联块或绝对定位将收缩包装div。其中，display：inline-block最容易以一个简单的text-align：center为中心。如果你必须支持糟糕的浏览器（我确定你这样做），check this out。

假设你还没有支持FF2，你实际上可以消除大部分黑客攻击，并且仍然通过使内部div成为跨度来支持旧的IE。 display：inline-block适用于较旧的IE，只要该元素最初是内联元素。

Answer 2

您必须在内部div上设置宽度，否则它将隐含地占据外部div的整个宽度。如果你的意思是“动态宽度”，就像“浮动”那样，将它集中在一起真的很棘手。

因此，假设您在div上设置宽度，只需添加此样式：

.centeredDiv {
    width: 400px;
    margin: 0 auto;  // auto left/right margin will center it
}

Answer 3

只要您想重新对齐innerDIV，就可以动态设置innerDIV的X和Y坐标。 EG：

innerDIV.style.left =（outerDIV.style.width-innerDIV.style.width）/ 2

innerDIV.style.top =（outerDIV.style.height-innerDIV.style.height）/ 2

其中innerDIV的样式设置为position:relative

Answer 4

你可以制作三个具有适当余量的css类，以便div位于中心位置。根据内部div的宽度应用这些类。

Answer 5

表仇恨现在风靡一时，但我发现使用单元格设置为百分比宽度的表可以干净地解决这个问题（并且是跨浏览器）：

<table>
  <tr>
    <td width="50%"></td>
    <td>centered content</td>
    <td width="50%"></td>
  </tr>
</table>