Html 垂直和水平居中放置栅格容器

令人惊讶的是，我在网上找不到这方面的任何信息。也许我错过了什么。如何在水平和垂直方向将整个主包装器置于CSS网格的中心，并保持响应能力

.wrapper{
显示：网格；
网格模板列：最小值（100vw，1fr）；
网格模板行：最小最大值（100vh，1fr）；
对齐项目：居中；
证明内容：中心；
}

洛雷姆勒姆

而不是

调整内容：中心

使用

调整项目：中心

.wrapper{
显示：网格；
网格模板列：1fr；
网格模板行：100vh；
对齐项目：居中；
对齐项目：居中；/*已调整*/
}

洛雷姆勒姆

这样做会更好

.wrapper{
显示器：flex；
flex-direction:row；//但实际上并不需要
对齐内容：中心；//或者您可以使用“周围的空间”
对齐项目：居中；
}

我建议您使用flex box，它是CSS3中的一种新布局模式

在本例中，我们只给出.maingrid display:flex，内容的高度和中心

然后，让.center将其自身与其父元素的中间对齐，如下所示

希望有帮助

.maingrid{
显示器：flex；
高度：100px；
证明内容：中心；
}
.这个{
自对准：居中；
}

洛雷姆勒姆

2x2网格中4个项目的示例

如果你想使你的物品在外容器中变小；将

宽度：100%

更改为任何您喜欢的内容，并在CSS中添加

页边距顶部：

和

页边距左侧：

（例如：

宽度：70%

，

页边距顶部：15%

，

页边距左侧：15%

。页边距是剩余空间的一半，以保持事物居中）

#包装器{
位置：绝对位置；
显示：网格；
宽度：100%；
网格模板柱：1fr 1fr；
}