Css 以动态大小的图像为中心

我正在使用一个PHP脚本自动按比例调整图片大小，使其适合给定的高度和宽度，例如：原始图片是200x100px，目标框是180x180px，调整大小的图像是180x90px

它工作得很好，但通常用于将图像置于div中心的CSS技巧似乎要求您事先知道尺寸

我发现的唯一解决方法是定义一个要显示的外部div:table；以及包含要显示的图像的div：表格单元；垂直对齐：中间对齐；文本对齐：居中

---

还有其他方法吗？

不是对齐图像的最佳做法

“文本对齐”属性的棘手之处在于，只能将文本与之对齐-不能使用它移动块级元素（如图像）。有些浏览器会将图像或表与此属性对齐，但正如您所发现的，它不可靠-

您可以使用不推荐使用的img的属性align=center，但不使用。这样标记和样式就混合在一起了，更糟糕的是，整个图像周围有垂直和水平的空间

<img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way

---

如果您需要使用img标记，并且不想将div与背景图像混在一起，可以尝试以下方法：

容器 { 宽度：180px； 高度：180像素； 背景色：FF0000； 线高：180px； 字号：0； 文本对齐：居中； } .集装箱img{ 垂直对齐：中间对齐； } 字体大小设置为0以避免奇怪的间距。使线条高度等于容器的高度，可以使垂直对齐作为垂直中心，至少对于图像是这样

这样做的好处是，您可以将图像放入img标记中，这在语义上比背景图像更令人愉悦。当您有一个已知的容器大小，但您希望在其中居中的图像大小未知时，此方法会起作用

编辑：这里有另一个小提琴的链接：

您提到可能需要在图像上方放置文本，所以我只是想展示一种快速的方法。这样可以在顶部添加20px。如果您需要坚持使用180 x 180，则可以调整逻辑以适应。

---

​

你不能在php脚本中加入透明颜色来获得180x180px的图像吗？我认为保证垂直居中的唯一其他方法是使用JavaScript-这在你的情况下可以接受吗？如果你想使用你提到的方法而不是表单元格技巧，您可以使用Javascript获取图像的维度并设置其样式，或者从PHP脚本返回到浏览器自定义样式规则。除了图像之外，包含的div中还有其他元素吗？@BaliBalo这是明智的想法。是的，使用PNG没有任何障碍，因为图像很小。