flexbox垂直中心，高度为100％ [英] flexbox vertical center with 100% height

问题描述

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

Is it possible to use flexbox to center vertically and horizontally for background color purposes?

.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％，则文字会移回顶部.

If I add a height: 100% the text moves back to the top.

推荐答案

添加显示:弹性显示您的商品.然后，只有它才能根据您的要求对齐其中的项目.请查看更新的代码.

Add display: flex for your items. Then only it can align items inside it as per your requirements. Please have a look at the updated code.

.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>

希望获得帮助

这篇关于flexbox垂直中心，高度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！