flexbox垂直中心，高度100％

Question

为了背景颜色的目的，是否可以使用flexbox垂直和水平居中？

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果我添加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>

希望这个帮助