CSS：如何垂直和水平对齐图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10371355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: how to vertically and horizontally align an image?
提问by StackOverflowNewbie
My page has space for an image that can be, say, a maximum 100x100 image. Users can upload any image dimension and the web application will resize it, maintaining aspect ration, to 100x100. So, it's possible for images to be resized to, say, 75x100 or 100x75, etc.
我的页面有一个图像空间，可以是最大 100x100 的图像。用户可以上传任何尺寸的图像，Web 应用程序将调整其大小，保持纵横比，达到 100x100。因此，可以将图像大小调整为 75x100 或 100x75 等。
Regardless of the resized image's dimension, I want it to appear vertically and horizontally centered in its allocated space on the web page. How do I do this in CSS? Will I need a containing div, like this:
无论调整后的图像尺寸如何，我都希望它在网页上分配的空间中垂直和水平居中显示。我如何在 CSS 中做到这一点？我是否需要一个包含 div，如下所示：
<div class="image_container">
<image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>
Anyway, sample CSS would be helpful. Thanks!
无论如何，示例 CSS 会有所帮助。谢谢！
回答by Zoltan Toth
Try this - http://jsfiddle.net/zYx4g/This will work on image of any size and in all browsers.
试试这个 - http://jsfiddle.net/zYx4g/这将适用于任何尺寸和所有浏览器的图像。
.image_container {
width: 300px;
height: 300px;
background: #eee;
text-align: center;
line-height: 300px;
}
.image_container img {
vertical-align: middle;
}
?
回答by Renzo Calla
I know this is and old question already answered but now you can use flex
我知道这是老问题，但现在你可以使用 flex
<div class="container">
<img src="http://placehold.it/200x200" />
</div>
CSS
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%;
}
FiddleDemo
小提琴演示
you can also customize the size of your container, some browser may not support flex you can check it here caniuse
您还可以自定义容器的大小，某些浏览器可能不支持 flex 您可以在这里查看caniuse
回答by YMMD
Move your left top corner of the image to the middle and reset it half the image's width and height:
将图像的左上角移动到中间并将其重置为图像宽度和高度的一半：
.image_container img{
position: relative;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
回答by Jamie Bicknell
You could try this:
你可以试试这个：
.image_container {
display:table-cell;
overflow:hidden;
text-align:center;
vertical-align:middle;
}
.image_container img {
vertical-align:baseline;
}
Not 100% sure on browser compatibility, but should get you started in the right direction. Example: http://jsfiddle.net/fJtwX/1/
不能 100% 确定浏览器兼容性，但应该让您朝着正确的方向开始。示例：http: //jsfiddle.net/fJtwX/1/
回答by SmithMart
Edit: Zoltan Toth answered nicely.
编辑：Zoltan Toth 回答得很好。
Jamie's answer works, if you want older browserer compatibilty then use a table?
杰米的回答有效，如果您想要旧的浏览器兼容性，请使用表格？
I know i'll probably get moaned at, but theres nothing wrong with tables when used where needed!
我知道我可能会被嘲笑，但是在需要的地方使用表格没有任何问题！
set your container up what ever size is needed, I'd need to see the page, but this should work on all browsers.
将您的容器设置为所需的大小，我需要查看页面，但这应该适用于所有浏览器。
回答by Elias
In case someone still needs this here's a way to do it with 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>回答by Jignesh Vaghela
<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%;
}
