Html 如何在div中制作图像中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16818192/
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 make a image center in a div?
提问by WoooHaaaa
My HTML code looks like this:
我的 HTML 代码如下所示：
<div class="ctn">
<img src="some-img.jpg"/>
</div>
The ctnshould be a fixed size, say, 150*150.
本ctn应该是一个固定大小的，比方说，150 * 150。
But the size of IMGs may bigger or smaller: 200*50, 50*200, 50*50 etc.
但是IMG的尺寸可能更大也可能更小：200*50、50*200、50*50等。
How do i make the image fit in the center of the div? The image's proportion should not be changed.
如何使图像适合中心div？图像的比例不应改变。
====UPDATE==== Yes, I need both hori & vertical center.
====更新==== 是的，我需要水平和垂直中心。
回答by noamik
You could add css, to center the image both horizontally and vertically:
您可以添加 css，将图像水平和垂直居中：
DIV.ctn {
min-height: 150px;
min-width: 150px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: table-cell;
vertical-align: middle }
...
...
<div class="ctn">
<img src="some-img.jpg"/>
</div>
Edit: for details see: http://www.w3.org/Style/Examples/007/center.html
回答by Andy
回答by Sharky
i think this is your answer
我想这是你的答案
.container img { width: 100%;}
.container {display: table-cell;vertical-align: middle}
it fits, in the centerof your fixed size div, and image proportions are notchanged.
它适合，在您的固定大小 div的中心，并且图像比例不会改变。
回答by n00dle
EDIT: re-reading, you want the image size to be fixed.
编辑：重新阅读，您希望图像大小是固定的。
div.cnt {
margin-left: auto;
margin-right: auto;
text-align: center;
display: table-cell;
vertical-align: middle;
min-height: 150px;
min-width: 150px;
}
回答by Alexandre Lavoie
The easiest way should be :
最简单的方法应该是：
div.cnt {
width: 150px;
height: 150px;
}
<div class="ctn" style="background: url('some-img.jpg') 50% 50% no-repeat;">
</div>
回答by zurfyx
If the ctnhas to be a fixed sized (ex: 150x150) and the image has to be proporcional and not bigger than that div, this is a solution:
如果ctn必须是固定大小（例如：150x150）并且图像必须是比例的并且不大于该 div，则这是一个解决方案：
CSS
CSS
.ctn{
background-color:#F00;
margin-left:auto;
margin-right:auto;
position:relative;
overflow:hidden;
height:150px;
width:150px;
}
.ctn div{
display:table-cell;
vertical-align: middle;
text-align:center;
}
.ctn div img{
width:150px;
}
HTML
HTML
<div class="ctn">
<div>
<img src="url" />
</div>
</div>
This way will center the div in the middle of the screen and the image will not be bigger than 150x150 but it will mantain its proporcionality.
这种方式将使 div 居中在屏幕中间，图像不会大于 150x150，但它会保持其比例性。
回答by Surafel Asrat
Give id to your like then in your css →
然后在你的 css 中给你喜欢的 id →
#foto{
margin-left:180px;
}
回答by rajansoft1
set style="margin-let:auto; margin:right:auto"
设置样式="margin-let:auto; margin:right:auto"
also specify width to the image else it will not work
还要为图像指定宽度，否则它将不起作用
