如何让Flexbox中的Div点击后缩放并居中于视口？

你之前的代码问题在于没有给选中的div设置脱离文档流的定位，默认position: static下left/top属性完全无效，所以才会出现偏移问题。下面提供两种纯CSS方案：

方案一：点击时临时放大居中（:active / :focus 状态） #

适合点击时保持效果，松开鼠标或失去焦点后恢复的场景：

HTML结构 #

<div class="flex-container">
  <div class="flex-item" tabindex="0">Item 1</div>
  <div class="flex-item" tabindex="0">Item 2</div>
  <div class="flex-item" tabindex="0">Item 3</div>
</div>

给每个flex子项加tabindex="0"是为了让非表单元素也能触发:focus状态（如果需要点击后保持效果，用:focus替代:active即可）。

CSS代码 #

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

.flex-item {
  width: 100px;
  height: 100px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 点击/聚焦时的样式 */
.flex-item:active, .flex-item:focus {
  position: fixed; /* 脱离文档流，基于视口定位 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(2); /* 先平移再放大，确保中心点对齐视口 */
  z-index: 999; /* 确保在其他元素上方 */
  outline: none; /* 去掉默认聚焦边框（可选） */
}

方案二：点击后保持放大状态（用checkbox实现持久化） #

适合点击后保持居中放大，再次点击恢复的场景：

HTML结构 #

<div class="flex-container">
  <label class="flex-item">
    <input type="checkbox" class="toggle">
    <span>Item 1</span>
  </label>
  <label class="flex-item">
    <input type="checkbox" class="toggle">
    <span>Item 2</span>
  </label>
  <label class="flex-item">
    <input type="checkbox" class="toggle">
    <span>Item 3</span>
  </label>
</div>

CSS代码 #

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

.toggle {
  display: none; /* 隐藏原生复选框 */
}

.flex-item {
  width: 100px;
  height: 100px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 复选框选中时的样式 */
.toggle:checked + span {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(2);
  width: 200px; /* 匹配scale放大后的尺寸 */
  height: 200px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

关键原理说明 #

1. position: fixed：让元素脱离原来的Flex布局流，直接基于浏览器视口定位，完全不受父容器布局规则影响。
2. transform: translate(-50%, -50%)：配合left:50%和top:50%，让元素的中心点与视口中心点对齐，实现真正的居中（你之前只写了translate(-50%, 0)，垂直方向未居中，且未设置定位导致偏移）。
3. 过渡动画transition：让放大居中的过程更平滑，提升交互体验。

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