首页 > web前端 > css教程 > 为什么'margin: auto”不绝对居中或固定定位元素?

为什么'margin: auto”不绝对居中或固定定位元素?

Susan Sarandon
发布: 2024-11-06 06:58:02
原创
611 人浏览过

Why Doesn't 'margin: auto' Center Absolutely or Fixed Positioned Elements?

居中定位元素:超越 'margin: auto'

在 CSS 中,使用 margin: auto 属性居中元素可能会很棘手处理绝对定位或固定定位的元素。要理解这种行为,我们需要深入研究 CSS 规范。

流内元素居中

对于流内元素(没有绝对或固定定位),将 margin-left 和 margin-right 设置为 auto 可实现相对于包含块的水平居中。这是有效的,因为 CSS 规范规定,如果两个边距都设置为自动,则它们必须相等,从而导致元素居中。

绝对和固定元素居中

但是,当涉及到绝对或固定元素时,情况就不同了。 CSS 规范规定:

  • 如果 left、width、right 三者均为 auto,则 margin-left 和 margin-right 值将设置为 0,防止自动居中。
  • 如果 left、width 或 right 任何一个不是 auto,则其他两个属性的 auto 值设置为 0,并且剩余的边距同样计算。这会导致居中。
  • 如果这三个属性都不是 auto,则 margin-left 和 margin-right 再次设置为 0,并应用特定规则来调整元素的位置。

将左和右设置为零

要使用 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板