居中定位元素:超越 'margin: auto'
在 CSS 中,使用 margin: auto 属性居中元素可能会很棘手处理绝对定位或固定定位的元素。要理解这种行为,我们需要深入研究 CSS 规范。
流内元素居中
对于流内元素(没有绝对或固定定位),将 margin-left 和 margin-right 设置为 auto 可实现相对于包含块的水平居中。这是有效的,因为 CSS 规范规定,如果两个边距都设置为自动,则它们必须相等,从而导致元素居中。
绝对和固定元素居中
但是,当涉及到绝对或固定元素时,情况就不同了。 CSS 规范规定:
将左和右设置为零
要使用 margin: auto 将绝对或固定元素居中,您必须还将 left 和 right 都设置为 0。这会强制浏览器同等地计算 margin-left 和 margin-right,从而导致水平居中。
但是,如果您为 left 或 right 指定任何其他值,则居中将除非您还设置了宽度,否则不会发生。省略这些属性之一将导致元素不居中。
真实示例
考虑以下代码:
.box { height: 50px; border: 1px solid; position: relative; } .box > div { position: absolute; left: 0; right: 0; margin: auto; width: 200px; background-color: red; color: #fff; }
在本例中,设置 left: 0 和 right: 0 可确保 div 始终与框的左右边缘齐平。 margin: auto 属性然后将 div 在框中水平居中。
以上是为什么'margin: auto”不绝对居中或固定定位元素?的详细内容。更多信息请关注PHP中文网其他相关文章!