求解React.js+Bootstrap小屏幕下React PopupBox图片适配居中问题

排查代码后可以直接定位到两个无需修改React逻辑、仅通过CSS就能修复的问题：

• 类名拼写不匹配导致所有自定义样式失效：你在弹窗内容里给图片绑定的类名是portfolio-image-popupbox，但CSS选择器写的是.portfolio-image-popubox（漏写了popupbox中间的p，把popup错写为popu），此前针对图片设置的宽度、适配规则完全没有匹配到DOM元素，自然出现小屏溢出、不居中的问题。
• 缺少针对弹窗内部容器的居中、图片自适应规则，react-popupbox默认的弹窗内容布局是左对齐，且没有限制图片的最大宽高，小屏下很容易超出可视区域。

不需要改动任何组件逻辑、不需要修改第三方包源码，直接替换修正后的CSS即可实现图片居中、完整适配屏幕的效果：

/* 修正类名拼写，和JSX中的类名保持完全一致 */
.portfolio-image-popupbox {
  width: 45rem;
  /* 新增适配规则 */
  max-width: 100%; /* 防止小屏横向溢出 */
  max-height: 70vh; /* 限制图片最大高度为视口的70%，避免纵向溢出 */
  object-fit: contain; /* 等比例缩放图片，保证完整显示不被裁切 */
  padding: 0 0.5rem;
  /* 新增居中规则 */
  display: block;
  margin: 0 auto;
}

.hyper-link {
  cursor: pointer;
  color: var(--secondary-dark);
}

.hyper-link:hover {
  color: var(--primary-red);
}

@media(max-width: 768px) {
  .portfolio-image-popupbox {
    width: 100%;
  }
  /* 新增：覆盖弹窗内部容器的默认对齐，让所有内容居中 */
  .popupbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
}

@media(max-height: 640px) {
  .popupbox-wrapper {
    height: 100%;
  }
  .portfolio-image-popupbox {
    width: 80%;
  }
}

方案说明 #

• 修正类名后，你之前写的宽度规则才能正常生效
• 新增的max-width、max-height、object-fit组合，能保证任意尺寸的图片都会等比例缩放到弹窗可视范围内，不会出现裁切、溢出的问题
• 小屏下给弹窗内容容器加弹性居中规则后，图片、说明文字、链接会整体居中，视觉效果更协调
• 整个方案没有改动任何业务JS逻辑，完全符合仅用CSS实现需求的预期。

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