如何使设置overflow:auto的div水平滚动条自动居中，实现图片居中？

嘿，我完全懂你想要的效果——当屏幕尺寸小于图片宽度时，带overflow: auto的div会出现水平滚动条，同时图片要始终在可视区域的居中位置，而不是默认贴左显示对吧？之前给图片加margin: auto没生效，是因为滚动容器的特性导致这个属性没法达到咱们要的效果，下面给你两个靠谱的解决方案：

方案一：用Flex布局快速实现 #

这是最简单的方法，只需要给你的div.content加两行Flex相关的样式就行：

div.content {
  overflow: auto;
  /* 开启Flex布局 */
  display: flex;
  /* 让内容在水平方向居中 */
  justify-content: center;
}
img {
  /* 确保图片不被缩放 */
  width: auto;
  height: auto;
}

效果说明：

• 当屏幕足够宽时，图片会在div里居中显示；
• 当屏幕变窄，div出现水平滚动条，此时图片依然处于滚动区域的中间位置，拖动滚动条就能查看图片的左右部分。

方案二：给图片套个容器（无需Flex） #

如果你不想用Flex布局，也可以给图片外层加一个容器，通过文本对齐来实现居中：

HTML结构调整： #

<div class="content">
  <div class="img-container">
    <img src="你的图片地址" alt="图片描述">
  </div>
</div>

CSS样式： #

div.content {
  overflow: auto;
  /* 让内部的inline-block容器居中 */
  text-align: center;
}
.img-container {
  /* 让容器贴合图片宽度，避免占用整行 */
  display: inline-block;
}
img {
  width: auto;
  height: auto;
}

原理说明：
text-align: center会让内部的inline-block容器在div的可视区域居中，而图片会完整显示在这个容器里。当图片宽度超过div时，div出现水平滚动条，容器带着图片保持在滚动区域的中间位置。

为什么原来的margin: auto没生效？ #

当div设置overflow: auto后，容器的内容宽度会被图片撑开（等于图片宽度），此时margin: auto是相对于这个被撑开的内容宽度计算的，而不是div的可视宽度。所以图片看起来还是贴左，因为它在内容区域里是居中的，但内容区域本身比可视区域宽，咱们看不到这个居中效果。而上面的两种方法，都是让图片相对于div的可视区域来居中，这才是咱们想要的效果。

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