（HTML/CSS）如何在父元素中垂直居中网格_Html_Css

（HTML/CSS）如何在父元素中垂直居中网格

html css

（HTML/CSS）如何在父元素中垂直居中网格,html,css,Html,Css,我试图将一个网格显示集中在一个100%页面大小的元素中，同时在整个网格周围留出一个空间。我尝试过自动边距，但网格仍粘在父级的顶部。添加手动边距时，主体会向下推网格的父元素，作为网格的边距。我还尝试了在父元素中的另一个div，将网格间隔到一半。有没有办法清洗（没有垫片） HTML: JSFIDDLE：试试这个： html，正文{ 身高：100%；宽度：100%； } 主要{ 背景：#f00；身高：100%；宽度：100%；显示器：flex；垂直对齐：居中； } .垫片{ 背景：橙色；

我试图将一个网格显示集中在一个100%页面大小的元素中，同时在整个网格周围留出一个空间。我尝试过自动边距，但网格仍粘在父级的顶部。添加手动边距时，主体会向下推网格的父元素，作为网格的边距。我还尝试了在父元素中的另一个div，将网格间隔到一半。有没有办法清洗（没有垫片）

HTML:

JSFIDDLE：试试这个：

html，正文{
身高：100%；
宽度：100%；
}
主要{
背景：#f00；
身高：100%；
宽度：100%；
显示器：flex；
垂直对齐：居中；
}
.垫片{
背景：橙色；
身高：10%；
}
.电网{
显示：网格；
身高：80%；
宽度：90%；
网格模板：1fr 2fr 1fr/1fr 2fr 1fr；
保证金：自动；
}
.grid分区{
背景：#00f；
边框：厚实的黑色；
}

“试试这个”在堆栈上不是可接受的答案。请努力解释您的答案，包括它是如何解决问题的以及为什么解决问题的。谢谢，flexbox的垂直和水平对齐似乎最适合这种情况。可能重复使用flexbox：您可以使用

vh

单位，而不是网格高度和垂直边距或填充的百分比（例如）

<html>
  <body>
    <main>
      <div class="spacer"></div>
      <div class="grid">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </main>
  </body>
</html>

html, body {
  height: 100%;
  width: 100%;
}

main {
  height: 100%;
  width: 100%;
}

.spacer {
  height: 10%;
}

.grid {
  display: grid;
  height: 80%;
  width: 90%;
  grid-template: 1fr 2fr 1fr / 1fr 2fr 1fr;
  margin: auto;
}