CSS - 我如何在div中居中div？

Question

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

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

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

Answer 1

浮动，显示：内嵌块或绝对定位将收缩div。其中，display：inline-block最容易以一个简单的text-align：center居中。如果你不得不支持蹩脚的浏览器（我相信你会这样做），check this out。

假设你还没有支持FF2，你实际上可以消除大部分黑客行为，并且仍然支持较老的IE，只需将内部div作为跨度即可。显示：只要元素最初是内联元素，内联块就可以在较早的IE中使用。

Answer 2

无论何时想要重新对齐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 3

可以提出三点CSS类有适当的利润，从而taht格预订购在中心&内格的宽度的基础上应用这些类。

Answer 4

表恨是所有的愤怒，这些天，但我发现，使用一个表设置为百分比宽度细胞解决了这个问题干净（并且是跨浏览器）：

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

Answer 5

您必须设置宽度在内部div，否则它隐含地将占用外部的整个宽度div。如果你的意思是“浮动”中的“动态宽度”，那么居中会非常困难。

因此，假设您设定的div的宽度，只需添加这种风格：

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