求助：修复移动端Flip Card溢出问题并实现卡片居中布局

一、居中布局修复 #

• 给卡片容器设置相对宽度+自动外边距，确保在移动端自适应居中：

  .flip-card-container {
    max-width: 90%; /* 限制最大宽度，避免超出视口 */
    margin: 1.5rem auto; /* 上下留间距，左右自动居中 */
    box-sizing: border-box;
  }
  

• 如果卡片是flex布局的子元素，给父容器添加flex居中属性：

  .cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem; /* 卡片间留白 */
  }
  

二、溢出问题修复 #

• 给卡片正反两面添加溢出隐藏，同时确保盒模型正确：

  .flip-card-front, .flip-card-back {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    overflow: hidden; /* 隐藏超出卡片的内容 */
    padding: 1.2rem;
    box-sizing: border-box; /* 内边距不增加总宽度 */
  }
  

• 移动端避免固定像素高度，改用自适应高度：

  .flip-card {
    width: 100%;
    height: auto; /* 高度随内容自适应 */
    position: relative;
    transform-style: preserve-3d;
  }
  

• 添加媒体查询优化移动端细节：

  @media (max-width: 768px) {
    .flip-card-container {
      max-width: 95%; /* 移动端放宽容器占比 */
    }
    .flip-card-front, .flip-card-back {
      padding: 1rem; /* 减小内边距，避免内容拥挤溢出 */
    }
  }
  

额外注意事项 #

• 检查全局样式是否给body/父容器添加了额外的左右margin/padding，避免干扰卡片居中；
• 确保3D翻转的perspective属性仅作用于卡片容器，不要影响外层布局；
• 若卡片内有图片，给图片添加max-width: 100%; height: auto;防止图片溢出。

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