如何使用flex / grid将网格在容器中居中？

如何解决如何使用flex / grid将网格在容器中居中？

即使对div居中存在很多问题，哪些问题不可行，出于某种原因，它们似乎都不起作用。作为我使用flex / grid的CSS菜鸟，我所知道的就是我想要拥有：

• 固定标头
• 固定的中间内容（水平和垂直居中）
• 固定页脚

    <div className="flex flex-col h-screen">
      <!-- HEADER -->
      <header className="flex h-20 bg-gray-100 justify-center items-center">
        <span className="font-bold text-2xl">
          title
        </span>
      </header>
    
      <!-- BODY -->
      <div className="flex-1 flex-col mx-auto justify-center items-center max-w-screen-lge p-5">
        <div className="grid grid-cols-2 gap-4 items-center">
          <div className="flex col-span-1 h-20 items-center justify-center bg-gray-300">
            1
          </div>
          <div className="flex col-span-1 h-20 justify-end bg-gray-300">
            2
          </div>
          <div className="flex col-span-2 h-12 items-center justify-center bg-gray-300">
           3
          </div>
          <div className="flex col-span-2 h-48 items-center justify-center bg-gray-300">
            4
          </div>
          <div className="flex col-span-2 h-48 items-center justify-center bg-gray-300">
            5
          </div>
        </div>
      </div>
    
      <!-- FOOTER -->
      <footer className="flex h-20 bg-gray-100 justify-center items-center">
        <p>footer text</p>  
      </footer>
    </div>

到目前为止，它看起来像这样： layout

我如何将div居中于flex-1容器内（这是一个正确的选择吗？）？

编辑： parent element content (child)

解决方法

不确定如何在顺风中做到这一点，但这是一个简单的示例，说明如何使用普通CSS做到这一点。

我没有以任何结构性方式更改您的标记。只是删除了类名，以便更轻松地了解什么正在影响什么。

这在微小的堆栈溢出摘要窗口中以一种不希望的方式压扁了（您可能想考虑一下），因此您应该扩展它以查看发生了什么。

垂直居中的关键是.content上的flex设置，它包装了网格布局：

• 通过display: flex使其成为Flex容器
• 确保该高度与您要居中的区域一样高，可通过min-height: 100vh在此处完成
• 设置flex-direction: column，使其项垂直堆叠。 （您可以不这样做而这样做，但这对我来说更有意义。）
• 设置justify-content: center以使内容居中。它垂直居中，因为这是弯曲方向轴。

您也可以通过place-items和flex或grid的某种组合来到达那里。

html,body,p {
  margin: 0;
  padding: 0;
}

.header {
  position: fixed; /* don't move,no matter what */
  top: 0; /* position fixed removes it from the normal laytou flow,so we should tell it where to be */
  left: 0;
  right: 0;
  width: 100vw;
  background: lightskyblue;
  text-align: center;
}

.footer {
  /*
  same as .header above but pinned to bottom instead of top.
  you could reduce repetition by putting the common rules in their
  own class (.fixed or whatever) and then have a secondary class for
  .top or .bottom,but this is fine for the purposes of this demo.
  */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  background: lightskyblue;
  text-align: center;
}

.content {
  min-height: 100vh; /* as tall as the viewport because that's where we want to be centered */
  max-width: 80vw; /* limit width */
  margin: 0 auto; /* center horizontally */

  display: flex; /* vertical centering is easy with flex */
  flex-direction: column;
  justify-content: center; /* see? */
  
  /*
  you could also accomplish the vertical centering with
  flex-direction: row (the default) and align-items: center
  instead of justify-content,but this way makes more sense to
  me for whatever reason
  */
}

.content-grid {
  display: grid; /* establish the grid container */
  grid-template-columns: repeat(2,50%); /* for this we only need 2 equal columns */
  grid-template-rows: 70px 50px 100px 100px; /* just ballpark/eyeballed row heights to make it vaguely resemble your example image */
  gap: 1rem; /* space between the blocks */
}

.content-grid > * {
  background: aliceblue; /* just so you can see it */
}

.content-grid > :nth-child(n + 3) { /* 1n + 3 translates as 'every one-th item starting at item 3' */
  /*
  make every block after the first two occupy the entire row.
  start at gridline 1,end at the last one (aka -1)
  */
  grid-column: 1 / -1; 
}

<div>
  <!-- HEADER -->
  <header class="header">
    <span>
      title
    </span>
  </header>

  <!-- BODY -->
  <div class="content">
    <div class="content-grid">
      <div>
        1
      </div>
      <div>
        2
      </div>
      <div>
       3
      </div>
      <div>
        4
      </div>
      <div>
        5
      </div>
    </div>
  </div>

  <!-- FOOTER -->
  <footer class="footer">
    <p>footer text</p>  
  </footer>
</div>