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

Posted 2023-03-06

【中文标题】为啥 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