如何在井字棋单元格中实现自适应文本并保持居中

1. 替换Flex布局为Grid，彻底解决布局断裂问题 #

原代码中flex: 0 0 33.33%会因为浏览器像素计算精度问题，导致三个单元格宽度总和超过容器宽度，触发换行断裂。改用Grid布局可自动均分列宽，从根源避免这个问题。

2. 实现文本自适应缩放与完美居中 #

• 给单元格添加Flex布局，配合align-items: center和justify-content: center，让文本在单元格内垂直水平双居中，比单纯text-align: center更可靠。
• 使用clamp()函数结合视窗宽度单位vw设置字体大小，实现顺滑的自适应效果：font-size: clamp(40px, 12vw, 60px)，即字体最小40px、最大60px，中间根据视窗宽度自动缩放。

修改后的完整代码 #

CSS

.cell {
  outline: 2px solid #000;
  cursor: pointer;
  /* 单元格内部用Flex实现文本双居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 自适应字体大小 */
  font-size: clamp(40px, 12vw, 60px);
}

#cellContainer {
  /* 替换为Grid布局，自动均分三列 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 300px;
  /* 小屏幕下占90%视宽，提升适配性 */
  width: 90vw;
  margin: auto;
  outline: 4px solid #000;
  /* 保持棋盘正方形比例 */
  aspect-ratio: 1 / 1;
}

#gameContainer {
  text-align: center;
  font-family: "Permanent Marker", cursive;
}

HTML

<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">

<div id="gameContainer">
  <h1>Tic Tac Toe</h1>
  <div id="cellContainer">
    <div cellIndex="0" class="cell">X</div>
    <div cellIndex="1" class="cell">O</div>
    <div cellIndex="2" class="cell"></div>
    <div cellIndex="3" class="cell"></div>
    <div cellIndex="4" class="cell"></div>
    <div cellIndex="5" class="cell"></div>
    <div cellIndex="6" class="cell"></div>
    <div cellIndex="7" class="cell"></div>
    <div cellIndex="8" class="cell"></div>
  </div>
  <h2 id="statusText"></h2>
  <button id="restartBtn">Restart</button>
</div>

额外说明 #

• aspect-ratio: 1 / 1替代了原有的padding-bottom方案，更简洁地维持棋盘正方形比例。
• clamp()是CSS原生函数，兼容性良好，无需额外JS即可实现顺滑的字体缩放，比media queries更高效简洁。

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