CSS：需要帮助如何正确放置容器中的两个项目答案

【问题标题】：CSS: Need help how to get my two items in my container to be placed correctlyCSS：需要帮助如何正确放置容器中的两个项目
【发布时间】：2020-03-20 19:00:12
【问题描述】：

我有一个问题，我应该如何将我的文本居中放置在框的中间并将我的号码（01、02 等）放在左上角？

我首先使用 flexbox 将所有内容居中，然后将我的标题对齐到 flex 开始。一切都很好，但你可以看到我的标题不在右上角。我如何确保标题位于左上角并且我的文本位于框的中心而不是稍微偏离中心？

我试图在自动上设置边距以将标题向左推，它可以工作，但我的文本随后被一直推到右边。

我将如何解决这个问题？

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.box {
  min-height: 354.48px;
  max-height: 354.48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.box h2 {
  font-size: 2rem;
}

.how-it-works {
  background-color: #c7ddea;
}

.O1 {
  background-color: white;
}

.O1 h2 {
  align-self: flex-start;
}

.O2 {
  background-color: #e7e7e7;
}

.O2 h2 {
  align-self: flex-start;
}

.O3 {
  background-color: #fff;
}

.O3 h2 {
  align-self: flex-start;
}

.O4 {
  background-color: #f17949;
}

.O4 h2 {
  align-self: flex-start;
}

.O5 {
  background-color: #fff;
}

.O5 h2 {
  align-self: flex-start;
}

<footer>
  <div class="box how-it-works">
    <h1>How it works?</h1>
  </div>
  <div class="box O1">
    <h2>01</h2>
    <p>Answer a few questions about yourself</p>
  </div>
  <div class="box O2">
    <h2>02</h2>
    <p>Choose a plan. Get a quote.</p>
  </div>
  <div class="box O3">
    <h2>03</h2>
    <p>Answe some questions about your medical history</p>
  </div>
  <div class="box O4">
    <h2>04</h2>
    <p>Wait 90 sec to get approved.</p>
  </div>
  <div class="box O5">
    <h2>05</h2>
    <p>Done!</p>
  </div>
</footer>

【问题讨论】：

html & css 代码？
一秒钟，这里显然没有显示。

标签： html css flexbox

【解决方案1】：

你可以这样做：

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.box {
  position: relative;
  min-height: 354.48px;
  max-height: 354.48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}

.box h2 {
  font-size: 2rem;
  line-height: 0;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.box p {
  text-align: center;
}

.how-it-works {
  background-color: #c7ddea;
}

.O1 {
  background-color: white;
}

.O2 {
  background-color: #e7e7e7;
}

.O3 {
  background-color: #fff;
}

.O4 {
  background-color: #f17949;
}

.O5 {
  background-color: #fff;
}

  <footer>
  <div class="box how-it-works"><h1>How it works?</h1></div>
  <div class="box O1">
    <h2>01</h2>
    <p>Answer a few questions about yourself</p>
  </div>
  <div class="box O2">
    <h2>02</h2>
    <p>Choose a plan. Get a quote.</p>
  </div>
  <div class="box O3">
    <h2>03</h2>
    <p>Answe some questions about your medical history</p>
  </div>
  <div class="box O4">
    <h2>04</h2>
    <p>Wait 90 sec to get approved.</p>
  </div>
  <div class="box O5">
    <h2>05</h2>
    <p>Done!</p>
  </div>
</footer>

【讨论】：

【解决方案2】：

如果我很了解您的需求，一种解决方案可能是将其添加到 .box 类：

.box{
    flex-direction: column;
}

【讨论】：