css - HTML/CSS - 水平居中宽度不断变化的 div

Question

我有一个父 div(为了测试我们称之为#parent)和一个子 div(测试原因#child)。 #parent绝对定位到页面底部，固定宽度100%，高度75px。

child 是一个包含动态内容的 div(使用 jQuery 进行更改)。由于它是动态的，所以 div 的宽度总是不同的。由于宽度总是未知且不同，因此水平居中此 div 的最有效方法是什么？任何帮助都会很棒。

Answer 1

执行此操作的正确方法如下:

#child {
    margin: 0 auto;
}

这会将上/下边距设置为 0，然后将左/右边距设置为 auto - 这意味着“尽可能大”。所以你在左边和右边有两个相等的边距，完全填满了空间，因此你有一个居中的 div。

虽然这仅适用于 block 元素，例如 div - inline 元素不能有自动边距。如果您需要将 inline 元素(如 span 或某些文本)居中，请在父元素上使用 text-align: center;:

#parent {
    text-align: center;
}