Question

我想将图像放在div 200x200px内，图像也必须水平和垂直居中。

我从问题"Align image in center and middle within div"开始，然后尝试第一个答案：

#over img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

它不起作用...... see jsfiddle

然后，我继续第二个回答：

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

它不起作用...... see jsfiddle

最后，我试试这个：

display: table-caption;
vertical-align: middle;
margin-left: auto;
margin-right: auto;

似乎有效！ see jsfiddle

有人可以向我解释为什么前两种方法无法将外部div保持为200x200px吗？我看到非常相似的代码片段，无法理解真正有什么不同。提前谢谢你......

Answer 1

将行高改为高度，他们会尊重您的意愿：）

使用背景图像为您简化一下并删除其他元素。

background-image: url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png');
background-repeat: no-repeat;
background-position: center center;

见这里：http://jsfiddle.net/NeN2t/2/

Answer 2

第二个答案 - 你忘记在表格中包装table-cell，或者选择容器的高度。

<div class="wrap">
<div style="display:table-cell; vertical-align:middle; text-align:center">
    <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
</div>
</div>

请参阅JsFiddle DEMO

我还有一种方法，对于现代浏览器，可能对它有帮助。 DEMO for modern browsers当您进行响应式设计或流体设计时，此方法更有用。

Answer 3

使用定位而不是table-cell。以下对我有用......

缩放到图像的中心（图像填充div）：

    div{
        display:block;
        overflow:hidden;
        width: 70px; 
        height: 70px;  
        position: relative;
    }
    div img{
        min-width: 70px; 
        min-height: 70px;
        max-width: 250%; 
        max-height: 250%;    
        top: -50%;
        left: -50%;
        bottom: -50%;
        right: -50%;
        position: absolute;
    }

不缩放到图像的中心（图像不填充div）：

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

使用display：table-caption将div中的中间和中间的图像对齐

3 个答案: