如何使响应式布局中浮动的图片在小屏幕下居中显示？

这个问题的核心原因是浮动元素脱离了正常文档流，margin: 0 auto 对浮动元素完全不起作用；再加上你的 #pic 固定了40%的宽度，即使换行后也不会自动占满容器宽度，自然没法实现居中效果。下面给你两种可行的解决方案，按需选择：

方案一：基于现有浮动布局，添加媒体查询适配小屏幕 #

我们可以通过媒体查询，精准捕捉到图片需要换行的临界点（根据你的文本最小宽度300px、容器宽度88%计算，临界点大概是 300px / 0.6 ≈ 500px），在小屏幕下取消浮动并调整样式：

.container { width: 88%; margin: auto; overflow: hidden; }
/* showcase */
#showcase h1 { margin: 0; }
#text { width: 60%; float: left; min-width: 300px; }
#pic { width: 40%; float: right; }
#pic img { width: 100%; }

/* 新增小屏幕适配规则 */
@media (max-width: 500px) {
  #text {
    float: none;
    width: 100%;
  }
  #pic {
    float: none;
    width: 100%; /* 也可以设置max-width: 300px; 限制图片最大宽度 */
    margin: 20px auto 0; /* 上下间距+左右自动居中 */
    text-align: center; /* 若图片宽度未设100%，用这个确保图片在容器内居中 */
  }
}

关键说明： #

• 当屏幕宽度≤500px时，取消文本和图片的浮动，让它们自然堆叠
• 把#pic的宽度设为100%（或按需限制最大宽度），再用margin: 0 auto实现水平居中；如果图片宽度小于容器，text-align: center能进一步确保图片在#pic容器内居中

方案二：改用Flex布局（更推荐的现代响应式方案） #

浮动是比较老旧的布局方式，Flex布局天生适配响应式场景，能更简洁地解决问题，甚至不需要依赖媒体查询：

修改CSS部分代码即可：

.container { 
  width: 88%; 
  margin: auto; 
  display: flex; /* 开启flex布局 */
  flex-wrap: wrap; /* 允许子元素空间不足时自动换行 */
  align-items: center; /* 垂直方向居中对齐（可选，按需调整） */
  gap: 20px; /* 子元素之间的间距（可选，优化视觉效果） */
}
/* showcase */
#showcase h1 { margin: 0; }
#text { flex: 1 1 300px; } /* flex-grow:1（分配剩余空间）, flex-shrink:1（允许缩小）, flex-basis:300px（最小宽度） */
#pic { flex: 1 1 200px; } /* 可调整flex-basis的值，控制换行的临界点 */
#pic img { width: 100%; }

关键说明： #

• flex-wrap: wrap 让子元素在容器空间不足时自动换行
• flex: 1 1 300px 表示#text会尽可能占满可用空间，但最小宽度是300px，当容器宽度不足以同时放下文本和图片时，图片就会自动换行
• 换行后，#pic作为flex子元素默认会占满容器宽度（因为flex-grow:1），图片设置width:100%就会自然居中；如果不想让图片占满容器，也可以给#pic添加justify-content: center或调整flex属性

两种方案都能解决你的问题，个人更推荐Flex布局——代码更简洁，维护性更强，也更符合现代前端的布局趋势。

内容的提问来源于stack exchange，提问作者T.Jami