Html 如何在div中垂直和水平对齐图像？

可能重复：

我将图像上传到一个php文件，这样我就可以将它们调整到一定的宽度或高度，甚至更小。我使用的图像大小调整器是phpclasses.org中的一个类，它似乎工作得很好。问题是，并非所有图像都是相同大小的。有的宽而窄，有的几乎是正方形。这导致所有图像都位于div的顶部，而不是中间。我的想法是让CSS完美地将图像居中，这样不同大小的图像在观看时看起来都不错，但我可以让它们水平居中，而不是垂直居中。以下是我试图集中的内容的屏幕截图：

正如你所看到的那样，枪是在div顶部对齐的？我不能用硬编码的数字将其推到中间，因为其他图像将具有不同的高度。我需要一些方法来确定图像的大小并从那里计算它

以下是图像所在分区的代码：

#产品{
浮动：左；
保证金：5px；
宽度：200px；
高度：200px；
边框：1px实心#999；
}
#产品形象{
保证金：2倍自动；
宽度：194px；
高度：145px；
边框：1px实心#999；
文本对齐：居中；
}

谢谢你看

#product
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
#product img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

---

最大高度/最大宽度用于处理可能太大的图像。

对于无法使用绝对位置的动态垂直对齐，我建议在所有情况下使用javascript进行绝对修复，但可以使用以下几种技术

使用以下CSS

#product
{
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
    text-align:center;
}

#product-image
{
    margin:2px auto;
    width:194px;
    height:145px;
    border:1px solid #999;
}​

---

通过

display:table cell

&

vertical align:middle；

CSS

   #parent {
    width:200px;
    height:200px;
    display:table;
    background-color: black;
    float:left;
    margin:5px;
}

#parent-image {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}

---

你需要使用

显示：表格单元格；

嘿，外星人先生，我相信你是对的。谢谢你的指导：）法汉，非常感谢你给我展示

最大高度
和
最大宽度
。这解决了我的很多问题。至于
垂直对齐
，我似乎无法理解让我再玩一下：）@Mike你不能使用
垂直对齐：中间；
除非你正在使用表格或
显示：表格单元格；
<div id="product">

    <div id="product-Inner">

        <img id="product-image" src="imageURL" />

    <div>

<div>

#product {

    float:left;
    display: table;
    box-sizing: border-box;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
    text-align:center;

}

#product-Inner {

    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

#product-image {

    box-sizing: border-box;
    max-height: 100%;
    max-width: 100%;
    border:1px solid #999;


}

   #parent {
    width:200px;
    height:200px;
    display:table;
    background-color: black;
    float:left;
    margin:5px;
}

#parent-image {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}