媒体查询断点下展开卡片无法居中，应如何使用Flex属性解决？

用到的核心属性 #

• position: relative 给卡片父级提供定位上下文
• position: absolute 让展开容器脱离正常文档流，不会挤压相邻卡片导致布局偏移
• left: 50% + transform: translateX(-50%) 实现展开容器相对于父卡片水平居中
• z-index 保证展开容器层级高于其他卡片，不会被遮挡

具体操作 #

仅需要修改部分CSS样式即可，原有JS逻辑无需调整：

.card {
  margin: 15px;
  width: calc((100% / 3) - 30px);
  transition: all 0.2s ease-in-out;
  /* 新增：作为展开容器的定位父级 */
  position: relative;
}
.card__expander {
  transition: all 0.2s ease-in-out;
  background-color: #333a45;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  color: #eceef1;
  font-size: 1.5em;
  /* 新增：脱离文档流+居中定位 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 新增：防止被其他卡片遮挡 */
  z-index: 10;
}
.card.is-expanded {
  /* 新增：给展开容器预留高度，避免覆盖下方卡片 */
  padding-bottom: 230px;
}

原有媒体查询中.card__expander的宽度设置无需修改，适配逻辑可以正常生效。修改完成后：

• 992px以上三列布局、768px-991px两列布局下，展开容器都会相对于点击的卡片居中显示，不会挤压相邻卡片导致网格错位
• 767px以下单栏布局时，展开容器自动占满全宽，符合预期效果

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