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会有所帮助。谢谢！

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

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

Answer 3

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

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

Answer 4

你可以试试这个：

.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/

Answer 5

编辑：Zoltan Toth很好地回答。

Jamie的回答是有效的，如果你想要较旧的浏览器兼容性然后使用表格？

我知道我可能会被呻吟，但在需要的地方使用桌子时没有任何问题！

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

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

Answer 6

如果有人仍然需要这个，可以使用显示表进行此操作;

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

7 个答案: