Html 如何水平和垂直居中div中的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10296015/
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
How to center image in a div horizontally and vertically
提问by CeccoCQ
I have the following markup code in my page:
我的页面中有以下标记代码：
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
它并没有像我预期的那样出现，它看起来像这样：
But I wanted to get this result:
但我想得到这个结果：
How can I center this image horizontally and vertically?
如何水平和垂直居中此图像？
采纳答案by AlphaMale
Here is a tutorialfor how to center the images vertically and horizontally in a div.
这是有关如何在 div 中垂直和水平居中图像的教程。
Here is what you are looking for:
这是您要寻找的内容：
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>回答by David Yell
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
对于垂直对齐，我将包含一些 CSS 以将其从顶部 50% 定位，然后将其向上移动图像像素高度的一半。
Horizontal, I would use a margin, as suggested.
水平方向，我会按照建议使用边距。
So if your image was 100x100px you'd end up with.
因此，如果您的图像是 100x100 像素，那么您最终会得到。
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
回答by Jignesh Vaghela
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
回答by Boro Brumen
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script: $(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/ repositionCenteredImage(); });
您需要解决两个方面。第一个方面是水平对齐。这很容易通过 margin: auto 应用在图像本身周围的 div 元素上实现。DIV 需要将宽度和高度设置为图像大小（否则这将不起作用）。要实现垂直居中对齐，您需要向 HTML 添加一些 javascript。这是因为 HTML 高度大小在页面启动时是未知的，以后可能会更改。最好的解决方案是使用 jQuery 并编写以下脚本： $(window).ready( function() { /* 监听窗口就绪事件 - 页面加载后触发*/ repositionCenteredImage(); });
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
显示图像的 HTML 页面如下所示：
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
附加到元素的 CSS 如下所示：
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
您可以从我们公司主页的以下网址下载整个解决方案：
回答by Chintan Mathukiya
This solution is for all size imagesIn this the ration of the image is also maintain.
此解决方案适用于所有尺寸的图像，因此图像的比例也保持不变。
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div> You can set size of
.client_logo
accourding to your requirement
您可以设置大小
.client_logo
根据您的要求
回答by Key-Six
Try something like this:
尝试这样的事情：
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
回答by srini
using margin-top
使用边距顶部
example css
示例CSS
#id_immagine{
margin:0 auto;
}
