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

但它似乎有点hacky，它似乎是错误的。

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

谢谢。

Answer 1

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

因此，如果不做任何事情，h1将展开以覆盖其父级的全部宽度：

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>

Revised Fiddle

参考文献：

Flexbox不会垂直居中

1 个答案: