CSS：如何垂直和水平对齐图像？答案

【问题标题】：CSS: how to vertically and horizontally align an image?CSS：如何垂直和水平对齐图像？
【发布时间】：2012-04-29 10:20:17
【问题描述】：

我的页面有一个图片空间，例如最大 100x100 的图片。用户可以上传任何图像尺寸，Web 应用程序会在保持纵横比的情况下将其调整为 100x100。因此，可以将图像大小调整为 75x100 或 100x75 等。

无论调整后的图像尺寸如何，我都希望它在网页上分配的空间中垂直和水平居中显示。我如何在 CSS 中做到这一点？我需要一个包含的 div，像这样：

<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>

无论如何，示例 CSS 会有所帮助。谢谢！

【问题讨论】：

这能回答你的问题吗？ Align image in center and middle within div

标签： css

【解决方案1】：

试试这个 - http://jsfiddle.net/zYx4g/ 这将适用于任何大小的图像和所有浏览器。

.image_container {
    width: 300px;
    height: 300px;
    background: #eee;
    text-align: center;
    line-height: 300px;
}

.image_container img {
    vertical-align: middle;
}

【讨论】：

这不适合 div！

【解决方案2】：

我知道这是一个老问题，但现在你可以使用 flex

<div class="container">
    <img  src="http://placehold.it/200x200" />
</div>

CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    width: 50vw;
    height: 50vw;
}
.container img
{
    max-width:100%;
    max-height:100%;
}

Fiddle演示

你也可以自定义容器的大小，有些浏览器可能不支持flex你可以在这里查看caniuse

【讨论】：

非常好！完美运行。

【解决方案3】：

将图像的左上角移动到中间并将其重置为图像宽度和高度的一半：

.image_container img{
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

【讨论】：

这适用于 100 x 100 像素的图像，但对于其他尺寸的图像则不起作用
如果你的图片是 120x100px 那么它会稍微靠近中间。试着想象一下浏览器将如何应用不同的 CSS 属性，你就会明白为什么如果图像大小不适合 CSS 属性，它就无法工作。
不会超过最大尺寸。
OK，但是如果它例如是 80x100px，那么它会离开真正的中间 10px。再说一遍：试着想象一下浏览器是如何应用 CSS 属性的，你就会明白我的截图是做什么的。

【解决方案4】：

<div class="blog-thumbnail">                
    <img src="img.jpg" alt="img">
</div>

.blog-thumbnail {
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.blog-thumbnail img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

【讨论】：

欢迎来到 Stack Overflow。您能否添加几句话来帮助解释您的答案？

【解决方案5】：

你可以试试这个：

.image_container {
    display:table-cell;
    overflow:hidden;
    text-align:center;
    vertical-align:middle;
}
.image_container img {
    vertical-align:baseline;
}

不能 100% 确定浏览器兼容性，但应该能让您朝着正确的方向开始。示例：http://jsfiddle.net/fJtwX/1/

【讨论】：

是否需要 div 包装器？
您说您希望图像在分配的空间（即 DIV）中水平和垂直对齐，所以如果是这种情况，您将需要 DIV，否则您只需显示图像跨度>
我只是在看这种方式，table-cell 在 IE7 及更低版本中不起作用。
@SmithMart 啊，我也这么想
@JamieBicknell，是的，我希望它显示在“已分配空间”的中心。这是否意味着我必须使用 div？我可以以某种方式仅依赖 img 标签吗？还有，table-cell怎么办？

【解决方案6】：

编辑：Zoltan Toth 回答得很好。

Jamie 的回答有效，如果您希望旧版浏览器兼容，那么请使用表格？

我知道我可能会被抱怨，但在需要的地方使用桌子并没有什么问题！

http://jsfiddle.net/Yhq5h/11/

将您的容器设置为所需的大小，我需要查看页面，但这应该适用于所有浏览器。

【讨论】：

是的，很公平。我用行高试过了，但由于某种原因它从来没有用过，一定是错字:)

【解决方案7】：

如果有人仍然需要这个，这里有一种使用显示表的方法；

.thumbnail { width:150px; height:150px; display: table; }

.thumbnail img { max-width:150px; max-height:150px; }

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

<article class="thumbnail">    
  <div class="thumbnailcontainer">
         <img id="Img1" src="http://img.youtube.com/vi/QAOMIH7cgh0/0.jpg" />   
   </div>
</article>

【讨论】：

Elias，下次使用代码格式（{} 按钮）来格式化您的代码更容易阅读，并且您不需要在标签内添加点：p
@goto，我知道对不起，我确实使用了它，但是当我输入答案时，我看到 html 代码没有显示在下面的框中（我是新来的，所以我没有不知道这是否正常）
别担心 Elias，我评论它是为了让你学习 :) 它通常需要在代码块之前有一个空行，这可能是你原始格式问题的根源。再见！