Flexbox 不垂直居中内容

Question

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

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

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

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

jsFiddle

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

我发现了一些其他代码可以达到预期的效果：

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

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

jsFiddle

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

对于我做错的任何帮助，我将不胜感激。

谢谢。

Answer 1

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

因此，无需执行任何操作，h1 将展开以覆盖其父项的整个宽度：

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

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

但是，同样的行为 不适用于 身高。您需要为容器指定高度，否则它默认为 height: auto（内容的高度）。

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

水平方向上，有很多 space 可以四处移动，居中没有问题。

垂直没有space，因为没有多余的高度。

Solution: Add height to your container.

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>

Revised Fiddle

参考文献：

How to Center Elements Vertically and Horizontally in Flexbox

Flexbox 不垂直居中内容

Flexbox not centering content vertically

html

css

centering

flexbox