CSS Flex垂直居中：如何在井字棋盒子hover时用Flex垂直居中显示X

嘿，这事儿用Flex本身的特性就能轻松搞定，不用绕弯子！我给你拆解一下具体怎么做：

核心思路 #

Flex布局天生就擅长处理居中问题，咱们只需要把每个棋盘格子（也就是你说的"盒子"）变成Flex容器，然后利用Flex的居中属性，就能让悬停时的"X"自动垂直+水平居中。

具体代码实现 #

假设你的棋盘格子类名叫.cell，先给它设置基础样式：

.cell {
  /* 先设置格子的尺寸和边框，根据你的需求调整 */
  width: 120px;
  height: 120px;
  border: 2px solid #333;
  
  /* 关键：把格子变成Flex容器 */
  display: flex;
  /* 垂直方向居中 */
  align-items: center;
  /* 水平方向居中 */
  justify-content: center;
  
  /* 可选：加个鼠标指针样式，提升交互感 */
  cursor: pointer;
}

接下来处理悬停显示"X"的效果，用伪元素最方便，不用额外加HTML标签：

.cell:hover::before {
  content: "X";
  /* 调整字体大小，让X更显眼 */
  font-size: 3rem;
  font-weight: bold;
  color: #666;
}

为什么这样管用？ #

当你把.cell设为Flex容器后，align-items: center会让容器内的所有元素在**交叉轴（也就是垂直方向）上居中，justify-content: center则负责主轴（水平方向）**的居中。悬停时生成的伪元素"X"作为容器的子元素，会自动继承这个居中效果，完美实现你要的垂直居中！

如果你的"X"是通过HTML子元素实现的（比如每个格子里有个<span class="x">X</span>），那只需要在悬停时显示这个子元素就行，居中效果依然生效：

.cell .x {
  display: none;
  font-size: 3rem;
  font-weight: bold;
  color: #666;
}

.cell:hover .x {
  display: block;
}

这样不管用哪种方式，都能轻松实现鼠标悬停时"X"垂直居中的效果啦！

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