CSS Grid实现井字棋时添加居中属性致边框错乱的解决方法

DevOps 小满

2026-5-27

解决井字棋网格元素居中且边框正常的问题

我明白你碰到的问题了——给容器加了justify-items:center和align-items:center后，原本规整的网格边框变得错乱，但不加这两个属性的话，单元格里的'X'又没法居中显示。

这背后的原因是：justify-items和align-items是控制网格项本身在网格单元格内的位置，你的.item元素默认会根据内容收缩尺寸，当它被居中后，就不再填满整个网格单元格，边框自然就跟着“缩”回去，看起来就乱了。

正确的思路是把居中逻辑放到网格项内部，让网格项本身保持填满单元格的状态，只让里面的内容居中。具体修改如下：

修改后的CSS代码

#container { 
  display: grid; 
  grid-template: 100px 100px 100px / 100px 100px 100px; 
  justify-content: center; 
  /* 移除容器上的这两个属性，避免网格项收缩 */
  /* justify-items: center; */
  /* align-items: center; */
} 

.item { 
  border-style: solid; 
  border-width: thin; 
  font-size: 80px; 
  /* 给每个网格项设置弹性布局，让内部内容居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可选：去掉a标签默认的下划线，让界面更整洁 */
  text-decoration: none;
}