如何居中Grid容器？现有方案存缺陷求正确实现方法

先解决你代码里的核心问题 #

你当前代码中.calendar__inner的position:absolute是导致各种居中方式失效或破坏Grid布局的关键——绝对定位会让元素脱离文档流，父容器的Flex居中逻辑直接失效，同时无宽度限制的绝对定位容器会导致Grid的1fr计算异常。先把这个绝对定位移除，再用以下几种标准方式实现居中：

方案1：Flex父容器居中（标准推荐方案） #

你之前用Flex包裹的思路完全没问题，只是被绝对定位打乱了。移除绝对定位后，父容器的display:flex + justify-content:center就能完美让Grid容器水平居中，且完全不会破坏Grid布局。

修改后代码：

.calendar__wrapper{
    font-size:20px;
    /* 移除不必要的position:relative，除非有其他定位需求 */
    display:flex; 
    justify-content: center;
}
.calendar__inner{ 
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    /* 移除position:absolute */
    justify-items:center; 
    /* 可选：给Grid容器设置最大宽度，适配小屏幕 */
    max-width: 90vw;
}

这个方法是现代布局中最优雅的居中方式之一，适配所有现代浏览器，完全不会影响Grid内部的单元格布局。

方案2：Margin自动居中（无需Flex） #

如果你不想用Flex，给Grid容器设置margin:0 auto即可，但需要确保容器是块级元素且有明确的宽度约束（避免容器撑满父级）。用width:fit-content可以让Grid容器自适应内部单元格的总宽度，适配性拉满：

代码示例：

.calendar__wrapper{
    font-size:20px;
    /* 不需要Flex布局 */
}
.calendar__inner{ 
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    justify-items:center; 
    /* 核心居中代码 */
    margin: 0 auto;
    width: fit-content;
    /* 可选：限制最大宽度 */
    max-width: 90vw;
}

方案3：绝对定位下的居中（特殊场景用） #

如果你因为某些需求必须保留绝对定位，不要用left:50% + transform，改用left:0; right:0; margin:0 auto，同时给Grid容器设置宽度，这样不会破坏Grid的布局计算：

代码示例：

.calendar__wrapper{
    font-size:20px;
    position:relative;
    /* 父容器需要设置高度，否则绝对定位元素会脱离高度计算 */
    min-height: 500px;
}
.calendar__inner{ 
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    position:absolute;
    left:0;
    right:0;
    margin:0 auto;
    /* 必须设置宽度，否则容器会撑满父级 */
    width: fit-content;
    justify-items:center; 
}

补充说明 #

• justify-items:center确实只能让Grid内部的单元格内容居中，和容器本身的居中无关，你对这个属性的理解是对的。
• 你觉得Flex居中“不够优雅”可能是误解——Flex是W3C推荐的现代布局方案，用来做容器居中是非常标准且优雅的实现，完全没有问题。

内容的提问来源于stack exchange，提问作者Skrepka Skrepka