(HTML / CSS)如何在父元素中垂直居中网格
(HTML / CSS)如何在父元素中垂直居中网格
提问于 2018-06-20 03:38:20
我试图在页面大小为100%的元素中居中显示网格，同时在整个网格周围留出空间。我已经尝试过自动页边距，但是网格粘在父页面的顶部。当添加手动边距时，body向下推网格的父元素，充当网格的边距。我还尝试了在父元素中使用另一个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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50935778
复制相关文章
相似问题