为什么边距：0 在未指定宽度的图像上自动居中文本？

Question

我在带有margin: 0 auto 的英雄图像上水平居中文本，但没有指定宽度。我在很多地方读到这个技巧只在指定宽度时才有效；为什么它在这种情况下有效？我的猜测是宽度只是设置为默认图像宽度。

这是我正在使用的代码（查看CodePen 以获取完整代码）。如果我从 .hero-image 的 CSS 规则集中删除除图像 URL 之外的所有内容，它仍然有效。

HTML：

<!-- Inside (Bootstrap 4) container-fluid div -->
    <div class="row">
      <div class="col">
        <div class="hero-image">
          <div class="hero-text text-white">
            <h1>Natalie Cardot</h1>
            <h5>Web developer</h5>
          </div>
        </div>
      </div>
    </div>

CSS：

.hero-image {
  background-image: url(https://image.ibb.co/fzz87S/laptop_reversed.jpg);
  /* Sets height to full height (100%) of viewport */
  height: 100vh;
  /* Ensures background image spans the full width of the viewport */
  background-size: cover;
  /* Aligns image to center of viewport */
  background-position: center;
  background-repeat: no-repeat;
  /* Enables flex layout */
  display: flex;
  /* Vertically aligns (align-items defines how the browser distributes space between and around flex items along cross-axis of container; works like justify-content but in the perpendicular direction) */
  align-items: center;
}

.hero-text {
  margin: 0 auto;
}

Answer 1

Margin:0 自动工作，因为默认 font-size 我建议您将英雄文本的宽度设置为 100%。在使用 text-align:center; 时，它将始终居中文本。 我的最终代码

.hero-text {
    margin:0px;
    width:100%;
    text-align:center
}

Answer 2

文本居中是因为您有body { text-align: center }。英雄文本div的宽度不是浏览器窗口全宽的原因是因为.hero-image是display: flex。为了让自动边距做某事，div 的宽度必须小于 100%。是的，所以它可以工作，但你并不真正需要它，因为居中的文本会为你做。

如果您删除 display: flex，您会看到 .hero-image 变为 100% 宽，并且您的自动边距没有任何作用，因为 L/R 边距没有空间（但请注意，由于 text-align，文本仍然居中)。

Answer 3

这里不是关于经典的margin:auto，而是关于 flexbox。你的容器设置了display:flex，.hero-image 是一个弹性项目，它的宽度不再是 100% 像默认 div 但它等于其内容的大小，这就是为什么 margin:auto 是在不需要指定固定宽度的地方居中元素。

一些相关问题：

What's the difference between margin:auto and justify-content / align-items center?

Flex item width flex-direction: column and margin: 0 auto