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

Question

我試圖將網格顯示居中在頁面大小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;
}

JSFIDDLE： https ：//jsfiddle.net/593Lovxw/22/

Answer 1

嘗試這個：

 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>

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

問題描述

1 個解決方案

解決方案1
0 2018-06-19 19:45:30

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

問題描述

1 個解決方案

解決方案1 0 2018-06-19 19:45:30

解決方案1
0 2018-06-19 19:45:30