为啥 CSS 中的“margin: 0 auto”+“display:block”命令使元素居中? [复制]

Posted

技术标签:

【中文标题】为啥 CSS 中的“margin: 0 auto”+“display:block”命令使元素居中? [复制]【英文标题】:Why "margin: 0 auto" + "display:block" commands in CSS is centering elements? [duplicate]为什么 CSS 中的“margin: 0 auto”+“display:block”命令使元素居中? [复制] 【发布时间】:2020-01-29 03:08:26 【问题描述】:

我理解“margin: 0 auto”+“display:block”可以使 div 或 img 等元素居中,但我无法理解其背后的逻辑。 我们只说: 1.元素与“外部”边界之间的空间为零。 2.你“抓住”了所有的线。

我真的不明白为什么它会居中元素。

谢谢!!!

【问题讨论】:

这里指定的是自动左/右边距和零上/下边距。自动auto 部分是导致居中的原因。 【参考方案1】:

您可以将 margin 属性设置为 auto 以使元素在其容器内水平居中。

然后元素将占据指定的宽度,剩余空间将在左右边距之间平均分配。

【讨论】:

但是为什么没有 "display:block" 就不行呢? @El-habib Amazzal【参考方案2】:

margin: 0 auto 表示 0 垂直边距和自动水平边距。 “自动水平边距”基本上是指生成自动居中边距(相对于父级)。

display: block 确保将其作为块元素而不是内联元素处理。

您可以将auto 视为“中心”的意思; (虽然可能有一些例外情况,你不希望总是这样想,不确定。)

【讨论】:

但是为什么没有 "display:block" 就不行呢? @Dave Cousineau @lir 内联元素的行为不同。如果元素已经是块元素,例如div,那么您不需要display: block。如果它类似于span,那么某些类型的格式将不起作用,或者会以不同的方式起作用。内联元素 kind of 的作用类似于句子(就格式而言),而块元素 kind of 的作用类似于段落。【参考方案3】:

因为浏览器会为您计算 margin-left 和 margin-right 并均匀地间隔。

enter link description here

【讨论】:

以上是关于为啥 CSS 中的“margin: 0 auto”+“display:block”命令使元素居中? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

CSS“margin:0 auto”不居中

求教css中元素的auto属性值是啥意思,比如margin:0 auto表示啥?

我在css中指定了 body width: 800px; background-color: pink; margin: 0 auto; 不起作用

margin:0 auto 表示啥意思??

margin:0 auto居中无效

ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码