(HTML/CSS)如何在父元素中垂直中心网格

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (59)

我试图在一个100%页面大小的元素中对网格显示进行居中,同时在整个网格周围留出一个空间。我已经尝试了自动边距,但是网格仍然停留在父元素的顶部。当添加手动边距时,主体将网格的父元素向下推,作为网格的边距。我还尝试了另一个div在其中。父元素间隔网格的一半。有任何方法来做这个清洁剂(没有间隔)?

HTML:

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

CSS:

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;
}
提问于
用户回答回答于

给它一个绝对位置,并将顶部和左侧的CSS偏移一半剩余宽度左边。

也就是说,你给的宽度90%,所以抵消了左边5%。并将顶部抵消10%

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

main {
  background: #f00;
  height: 100%;
  width: 100%;
}

.spacer {
  background: orange;
  height: 10%;
}

.grid {
  display: grid;
  height: 80%;
  width: 90%;
  grid-template: 1fr 2fr 1fr / 1fr 2fr 1fr;
  margin: auto;
  position: absolute; 
  top: 10%;
  left: 5%
}

.grid div {
  background: #00f;
  border: thick solid green;
}
<html>
  <body>
    <main>
      <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 {
  background: #f00;
  height: 100%;
  width: 100%;
  display: flex;
  vertical-align: center;
}

.spacer {
  background: orange;
  height: 10%;
}

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

.grid div {
  background: #00f;
  border: thick solid black;
}
<html>
  <body>
  <div class="spacer"></div>
    <main>
      <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>

扫码关注云+社区

领取腾讯云代金券