html - 具有 100% 高度的 flexbox 垂直中心

Question

是否可以使用 flexbox 垂直和水平居中以用于背景颜色？

.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  text-align: center;
}

.item {
  flex: 1;
  background-color: green;
  align-self: center;
  justify-content: center;
}

<div class='wrapper'>
  <div class='item'>
    sdafsdfs
  </div>
</div>

如果我添加一个 height: 100%文本移回顶部。

Answer 1

添加 display: flex 为您的元素。然后只有它可以根据您的要求对齐其中的元素。请查看更新后的代码。

.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  text-align: center;

}

.item {
  display: flex;
  background-color: green;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;

}

<div class='wrapper'>
  <div class='item'>
    sdafsdfs
  </div>
</div>

希望这有帮助