DIV 中的中心图像（原始可以大于 DIV）答案

【问题标题】：Centre Image in DIV (Original can be bigger than DIV)DIV 中的中心图像（原始可以大于 DIV）
【发布时间】：2013-12-03 01:20:43
【问题描述】：

在 DIV 中处理不同尺寸图像的可怕居中问题。

从 StackOverflow (How to vertically align an image inside div) 获得了一个解决方案，使用 <SPAN> 作为虚拟元素（使用 vertical-align: middle），除了比 DIV 更大的图像并且这些图像被正确调整大小之外，它运行良好，但是显示在 DIV 下方。

如果我删除<SPAN>，则居中在水平方向上起作用，但在垂直方向上不起作用。

如果有一个简单的改变，我可以按照我喜欢的解决方案的简单性来做。

测试在

http://mclportal.net/ModalTests.html

【问题讨论】：

设置为背景图片，然后使用这个cssbackground-position:center; background-size: contain;
你知道图片放在页面上时的尺寸吗？
我不知道图像的大小，如果它们比容器大，我会让浏览器的力量为我调整它们的大小。
@RoyPicko92 一个好主意，但是当图像大于 div 时，它只会从原始图像中削减所需的中心量

标签： css image html alignment center

【解决方案1】：

您应该在图片上设置最大宽度和最大高度。然后只需在具有相对位置的 div 内使用图像的相对定位。比如……

<div style="height: 300px; width: 300px; position: relative; text-align: center;>
<img src="#" style="max-width: 200px; max-height: 200px; position: relative; top: 50px; />
</div>

使用这样的方法，所有图像都将相互垂直对齐，并在它们的 div 容器中居中。加上设置最大高度和宽度将允许图像保持其纵横比。

【讨论】：

感谢您的建议，但我不知道图像的大小，我依靠浏览器调整它们的大小以适合我的 DIV

【解决方案2】：

这对你有用：

<div id="divModal" style="display:table">
   <div id="divImage" style="display:table-cell; vertical-align:middle">
      <img id="img" src=".........">
   </div>
</div>

【讨论】：

谢谢。效果很好。无法投票，因为我没有很高的声誉 - 抱歉。

【解决方案3】：

@mcl 不确定您是否已设法解决您的问题。

如果不查看我的博客文章 centering large images in smaller containers 他们也是那里的 codepen 演示。

我遇到了同样的问题，并设法让它在不需要任何 javascript 或内联样式的情况下工作。

希望对你有帮助

【讨论】：