我有一个循环来加载浮动 div 块中的徽标图像，我尝试了一些来自 stackoverflow 的提示，但没有运气使徽标在 div 中对齐中心和中间，所有徽标高度都不是固定的，并且可能具有不同的高度对于每个：
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="left" src="images/logo/logo1.jpg">
</div>
请帮忙，谢谢。
【问题讨论】：
使用定位。以下对我有用...
缩放到图像中心（图像填充 div）：
div{
float:left;
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
不缩放到图像的中心（图像不填充 div）：
div{
float:left;
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
【讨论】：
如果你还没有这样做的话，你真的应该把你的 CSS 从style 属性中移出到像style.css 这样的文件中。但如果你真的需要，你可以像现在一样将下面的代码放入内联样式中。
从您的图像标签中删除align="left" 属性并将图像的显示设置为block。这将允许margin: 0 auto; 在包含的 DIV 中为您的图像居中。
看起来您必须使用 CSS 复制 <table> 才能获得所需的垂直居中。表格单元格允许垂直居中。为此，我添加了带有.container 类的附加DIV。 .container DIV 的显示设置为table，.image-container DIV 的作用类似于表格单元格，其显示设置为table-cell。
CSS
.container {
float: left;
width: 80px;
height: 80px;
padding: 8px;
border: 1px solid #ccc;
display: table;
}
.image-container {
display: table-cell;
vertical-align: middle;
}
.image-container img {
display: block;
margin: 0 auto;
}
HTML
<div class="container">
<div class="image-container">
<img src="images/logo/logo1.jpg">
</div>
</div>
JSFiddle：http://jsfiddle.net/MJ5j4/
【讨论】：
text-align:center相同
只需创建一个类“centerImgWrapper”，然后使用 div 将所有“中心”图像包装在代码中的任何位置。
那是纯 CSS
.centerImgWrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;}
.centerImgWrapper img {
left: 0;
right:0;
top: 0;
bottom:0;
max-height: 100%;
max-width: 100%;
margin:auto;
position:absolute;
}
看看小提琴。 MyFiddle
戴夫
【讨论】：
如果你想把它放在 div 的中间，你试过了吗：
<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
<img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">
</div>
我使用了“margin-left:50%; margin-top:50%;”在 IMG 标签内，去掉了“align”和“float”属性。在这种情况下，我可能不想使用“对齐”。 不管怎样，我希望它会有所帮助。
【讨论】：
margin-left: 50%; 会将图像的左侧推到DIV 的中间，而margin-top: 50%; 会将图像的顶部推到DIV 的中间。这不会使其居中。这会将图像的左上角置于包含 DIV 的中间。
图像或多或少地显示为内联块。所以你可以在容器 div 的样式上设置text-align: center;。
使用 css 使某些东西在中间垂直对齐很复杂。如果您无论如何都打算使用 JavaScript 动态放置徽标，则可以省去麻烦，只需使用 JavaScript 指定边距即可将其垂直居中。
查看此演示：http://jsfiddle.net/jyvFN/1/
HTML
<div id="container">
<img id="logo" src="http://placekitten.com/100/100" />
</div>
CSS：
#container {
float: left;
background-color: blue;
width: 200px;
height: 150px;
text-align: center;
border: 1px solid red;
}
JavaScript
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";
【讨论】：
为什么不设置图像中心对齐？ 那么你的代码应该是：
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">
而且我认为这也是图像宽度与 div 块的比例+它的填充和边框的问题。 尝试设置它的平衡。
【讨论】：