移动端Div居中适配问题：兼顾PC端50%与移动端70-80%宽度

方法1：使用CSS媒体查询精准适配 #

这是针对性解决多端显示问题的直接方案，通过媒体查询为不同屏幕尺寸设置专属样式：

/* PC端基础样式 */
.image-container {
  width: 50%;
  margin-left: 25%;
  /* 可选：限制最大宽度，避免超大屏内容过宽 */
  max-width: 1200px;
}

/* 移动端适配（以768px为断点，可根据需求调整） */
@media (max-width: 768px) {
  .image-container {
    width: 80%; /* 你需要的70%-80%范围 */
    margin-left: 10%; /* 居中计算逻辑：(100% - 容器宽度)/2 */
  }
}

方法2：简化居中逻辑的自适应方案 #

你原本的居中写法可以优化，用margin: 0 auto自动计算左右外边距，更符合CSS规范且易维护：

.image-container {
  width: 50%;
  margin: 0 auto;
  max-width: 1200px;
}

@media (max-width: 768px) {
  .image-container {
    width: 80%;
  }
}

额外优化建议 #

• 可根据目标设备调整媒体查询的断点值（比如换成640px适配小屏手机）；
• 给容器内的图片添加自适应样式，避免超出容器导致横向滚动：

.image-container img {
  max-width: 100%;
  height: auto;
}

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