将 div 中的中心和中间的图像与 display:table-caption 对齐答案

【问题标题】：Align image in center and middle within div with display:table-caption将 div 中的中心和中间的图像与 display:table-caption 对齐
【发布时间】：2014-09-18 10:03:07
【问题描述】：

我想在 200x200px 的 div 中放置一个图像，并且图像必须水平和垂直居中。

我从 SO 问题 "Align image in center and middle within div" 开始并尝试 first 答案：

#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 吗？我看到非常相似的代码 sn-ps 并且无法理解真正有什么区别。提前谢谢你...

【问题讨论】：

如果您使用 height 而不是 line-height ，第二个示例似乎有效（我不知道您为什么要首先使用它）。

标签： html css alignment center vertical-alignment

【解决方案1】：

将 line-height 更改为 height ，他们会尊重您的意愿 :)

通过使用 background-image 为您简化了一点并删除了其他元素。

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/

【讨论】：

background 方法是我首先尝试的，但后来改变了主意，因为我想在 echo.js 中使用延迟加载
不要使用表格标题，看看我的小提琴如何在 div 中居中图像，现在你甚至可以淡化它并覆盖它:)
好的，您仍然可以使用 javascript 函数在页面加载时调用以延迟插入图像。所有文档资源总是在文档末尾加载。

【解决方案2】：

第二个答案-您忘记将表格单元格包装在表格中，或者为容器选择高度。

<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这种方法在你做响应式设计或者流体设计时更有用。

【讨论】：

【解决方案3】：

使用定位而不是表格单元格。以下对我有用...

缩放到图像的中心（图像填充 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;
    }

【讨论】：