令人惊讶的是,我无法在网上找到任何相关信息.也许我错过了什么.如何使用CSS Grid水平和垂直地将整个主包装器中心放置,显然,保持响应性？
.wrapper {
display: grid;
grid-template-columns: minmax(100vw, 1fr);
grid-template-rows: minmax(100vh, 1fr);
align-items: center;
justify-content: center;
}<div class="wrapper">
<div class="centerthis">loremloremlorem</div>
</div>使用上面的CSS,它div是垂直居中,但不是水平居中.
以下CSS将div水平居中,但不是垂直居中:
.maingrid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-content: center;
}
.centerthis {
align-self: center;
justify-self: center;
}<div class="maingrid">
<div class="centerthis">loremloremlorem</div>
</div>