为什么 flex box 不能正确地居中我的 div答案

【问题标题】：Why isn't flex box centering my div properly为什么 flex box 不能正确地居中我的 div
【发布时间】：2023-02-20 17:34:01
【问题描述】：

我正在观看一个视频，该视频使用对齐项目和对齐中心将 div 放在页面顶部

为什么它只在顶部而不在页面中间？

.wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 10%;
  overflow: hidden;
  height: 100%;
}

<div class="wrapper">
  <div class="cols cols0">
    <span class="topline">Hello</span>
    <h1> I'm <span class="multiText">Coder</span></h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, sed nam quia autem voluptatum quae omnis maiores dolorem hic dolores sint quisquam a. Eaque expedita laborum debitis, dolores fugit assumenda!</p>
    <div class="btns"> <button> download CV</button>
      <button> hire me</button>
    </div>
  </div>
  <div class="cols cols0"></div>
</div>

【问题讨论】：

你能发布整个 html 和 css 吗？也可能是因为其他一些因素
问题是 height: 100% 表示父母身高的 100%。然而，父母的身高默认设置为fit-content，表示身高为undefined。 undefined 的 100% 也是 undefined！

标签： html css flexbox

【解决方案1】：

尝试删除第二个块

<div class="cols cols0"></div>

【讨论】：