在Mozilla上，这支钢笔有效。但是，当我切换到Chrome时，它会中断。
只是我或浏览器出了什么问题？
.container {
height: 500px;
width: 500px;
background-color: beige;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
.container h2 {
position: absolute;
justify-self: center;
align-self: center;
grid-row: 1;
grid-column: 1;
}<div class="container">
<h2>TEXT</h2>
</div>
答案 0 :(得分：1)
Chrome似乎已偏离此问题的规范指导。
justify-self和align-self属性 应该在网格容器的绝对定位的子元素上工作。
9.2. With a Grid Container as Parent
网格容器的绝对定位的子节点是流出的 不是网格项，因此不会影响其他项的放置 或者网格的大小。
网格绝对定位的子项的静态位置 容器被确定为它是网格中的唯一网格项 边缘与网格的填充边缘重合的区域 容器
请注意，此位置受
justify-self值的影响 和孩子的align-self。
所以，Firefox似乎有这个权利。
对于其他居中选项，请参阅此帖：
答案 1 :(得分：0)
position: absolute正在抛弃Chrome（在v62上测试）。似乎Firefox将justify-self和align-self属性解释为覆盖，而Chrome则不会，因此行为也不同。
只需删除position: absolute即可。