Flexbox 不垂直居中内容

Question

所以我试图使用 flexbox 将我的名字放在屏幕中间。

在浏览了许多教程之后，他们说我需要完成的唯一代码是......

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<div>
  <h1>
    David
  </h1>
</div>

js小提琴

如果您尝试上面的代码，它只会将框水平居中。

我找到了一些其他的代码来实现预期的效果：

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: absolute;
}

<div>
  <h1>
    David
  </h1>
</div>

js小提琴

但这似乎有点hacky，而且似乎是错误的。

对我做错的任何帮助肯定会非常感激。

谢谢你。

Answer 1

在 CSS 中，默认情况下，块级元素通常占据父元素的 100%宽度。

因此，不做任何事情， anh1将扩展以覆盖其父级的整个宽度：

div { border: 1px solid black; }
h1  { background-color: yellow; }

<div>
  <h1>
    David
  </h1>
</div>

然而，这种行为并不能适用于高度。您需要为容器指定高度，否则默认为height: auto（内容的高度）。

因此，内容是水平居中而不是垂直居中。

横向上，有足够的空间可以四处走动，居中也没有问题。

垂直方向，没有空间可走，因为没有额外的高度。

解决方案：为您的容器添加高度。

html, body {
  height: 100%;
  margin: 0;
}

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

<div>
  <h1>
    David
  </h1>
</div>

修正小提琴

参考：

• 如何在 Flexbox 中垂直和水平居中元素
• 对齐 Flex 项目的方法