CSS：如何垂直水平居中一张图片？

Question

我网页上有一个留白，可以放置最大100x100的图像。用户可以上传任何尺寸的图像，Web应用程序将按比例调整大小为100x100。因此，图像可能被调整大小为75x100或100x75等。

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

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

无论如何，示例CSS将非常有帮助。谢谢！

- StackOverflowNewbie

---

这个回答解决了你的问题吗？如何在div中将图像居中对齐并垂直居中显示 - Felix

Answer 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;
}
​

- Zoltan Toth

---

这个内容不适合放在 div 中！ - psiyum

Answer 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进行检查。

- Renzo Calla

---

非常好！完美运行。 - Jack Vial

Answer 3

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

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

- YMMD

---

那可以用于 100 像素乘以 100 像素的图像，但对于其他图像大小它将不起作用。 - Jamie Bicknell

如果您的图像大小为120x100像素，那么它将略微靠近中间。试着想象浏览器如何应用不同的CSS属性，您就会明白为什么如果图像大小不符合CSS属性，它就无法正常工作。 - YMMD

它不会超过最大尺寸。 - StackOverflowNewbie

好的，但是如果它例如是80x100像素，那么它将离真正的中心左边10像素。再说一遍：试着想象浏览器如何应用CSS属性，你就会理解我的代码片段所做的事情了。 - YMMD

Answer 4

你可以尝试这个：

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

关于浏览器兼容性不能百分百确定，但应该可以让你朝正确的方向开始。示例: http://jsfiddle.net/fJtwX/1/

- Jamie Bicknell

---

div包装器必要吗？ - StackOverflowNewbie

你说你希望图像在所分配的空间（即 DIV）中水平和垂直对齐，因此如果是这样，你就需要用到 DIV，否则你只需显示图像。 - Jamie Bicknell

我刚看到这个问题，而且在IE7及以下版本中table-cell无法正常工作。 - SmithMart

@SmithMart 哦，是的，我也这么想。 - Jamie Bicknell

@JamieBicknell，是的，我希望它出现在“分配的空间”中心。这是否意味着我必须使用div？我能否仅依赖img标签？还有，table-cell该怎么办？ - StackOverflowNewbie

正如@SmithMart所指出的那样，它在IE7及以下版本中无法工作。ZoltanToth的答案非常稳定且更兼容。 - Jamie Bicknell

Answer 5

如果有人仍然需要，这是一种使用display table的方法；

.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

---

Elias，下次使用代码格式（{}按钮）来格式化你的代码，这样更容易阅读，而且不需要在标签内添加点：p - goto

@goto，我知道很抱歉，我确实使用了它，但当我输入答案时，我发现HTML代码没有显示在下面的框中（我是新来的，所以不知道这是否正常）。 - Elias

别担心，Elias，我已经为你添加了注释，让你可以学习 :) 通常在代码块之前需要一个空行，这可能是你原始格式问题的源头。再见！ - goto

Answer 6

编辑：Zoltan Toth回答得很好。

Jamie的答案是可行的，如果您需要兼容旧浏览器，那么使用表格如何？

我知道我可能会被责备，但在必要时使用表格并没有什么问题！

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

设置您的容器，无论需要多大，我需要看到页面，但这应该适用于所有浏览器。

- SmithMart

---

好的，没问题。我尝试使用行高来实现它，但不知道为什么从来没有成功过，可能是打错了:) - SmithMart

Answer 7

<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%;
}

- Jignesh Vaghela

---

欢迎来到 Stack Overflow。您能否添加一些文字来帮助解释您的答案？ - Joey

Answer 8

这是最干净、最简单的解决方案：

.center {
     position: absolute;
     box-sizing: border-box;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
}

只需将图像添加“center”类。如果您没有得到期望的结果，那可能是因为您的外部容器没有定位。只需在外部容器中添加“border: 1px dashed red”进行调试。

这绝对有效。

- Vinnie Amir