Flexbox 不垂直居中内容

Posted 2023-03-05

【中文标题】Flexbox 不垂直居中内容

【英文标题】：Flexbox not centering content vertically

【发布时间】：2016-09-10 10:54:40

【问题描述】：

所以我尝试使用 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，而且似乎是错误的。

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

谢谢。

【参考方案1】：

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

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

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

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

但是，同样的行为不适用于height。您需要为容器指定高度，否则它默认为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

参考资料：

How to Center Elements Vertically and Horizontally in Flexbox Methods for Aligning Flex Items

【讨论】：

非常感谢。那解决了它。它一直困扰着我。