小编Dav*_*vid的帖子

Flexbox 不垂直居中内容

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

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

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
Run Code Online (Sandbox Code Playgroud)
<div>
  <h1>
    David
  </h1>
</div>
Run Code Online (Sandbox Code Playgroud)

js小提琴

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

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

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: absolute;
}
Run Code Online (Sandbox Code Playgroud)
<div>
  <h1>
    David
  </h1>
</div>
Run Code Online (Sandbox Code Playgroud)

js小提琴

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

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

谢谢你。

html css centering flexbox

5
推荐指数
1
解决办法
7409
查看次数

标签 统计

centering ×1

css ×1

flexbox ×1

html ×1