如何在包含div内对齐图像？
实例
在我的示例中，我需要使用class=“frame”将＜img＞垂直居中放置在＜div＞中：
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame的高度是固定的，图像的高度是未知的。如果这是唯一的解决方案，我可以在.frame中添加新元素。我正在尝试在Internet Explorer 7和更高版本WebKit、Gecko上执行此操作。
看到这里的jsfiddle。
.框架{高度：25px；/*等于最大图像高度*/线条高度：25px；宽度：160px；边框：1px纯红色；文本对齐：居中；边距：1em 0；}国际货币基金组织{背景：#3A6F9A；垂直对齐：中间；最大高度：25px；最大宽度：160px；}＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=250/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=25/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=23/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=21/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=19/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=17/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=15/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=13/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=11/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=9/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=7/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=5/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=3/></div>
我为这个老问题添加了一个新的解决方案，因为我发现答案中没有包含我的首选方法。
在每个项目中，在一开始，我创建了2个CSS类
.flex-centered {
display: flex;
flex-direction-column;
justify-content:center
}
.abs-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
根据情况，您可以将两种元素置于中心。
flex centre对于页面上的图像和内容更加通用，abs居中需要一个相对的父级，这对居中的div很好，就像弹出窗口一样。
所以你只要打电话
<div class='flex-centered'>
<img>
</div>
并且图像垂直居中。
.flex居中{显示：柔性；弯曲方向：柱；对齐内容：中心；}/*这也是水平居中*/.m0a时{边距：0自动}/*让一个大家长变成灰色*/.大div｛高度：200px；宽度：200px；背景：#ccc；边界半径：4px；}/*制作一个小div以居中*/.small div｛高度：20px；宽度：20px；背景：红色；}<div class=“flex center big div”><div class=“small div m0a”></div></div>
CSS网格
如果要在图像容器内垂直对齐单个图像，可以使用以下方法：
.img-container {
display: grid;
}
img {
align-self: center;
}
.img容器{显示：栅格；栅格自动流动：列；背景：#BADA55；宽度：1200px；高度：500px；}img.垂直对齐{对齐自身：中心；}<div class=“img container”><img src=“https://picsum.photos/300/300" /><img class=“vertical align”src=“https://picsum.photos/300/300" /><img src=“https://picsum.photos/300/300" /></div>
如果要在图像容器中对齐多个图像，可以使用以下方法：
.img-container {
display: grid;
align-items: center;
}
.img容器{显示：栅格；栅格自动流动：列；对齐项目：居中；背景：#BADA55；宽度：1200px；高度：500px；}<div class=“img container”><img src=“https://picsum.photos/300/300" /><img src=“https://picsum.photos/300/300" /><img src=“https://picsum.photos/300/300" /></div>
请注意，我在这两种情况下都使用了grid auto-flow:column，因为否则元素会换行到指定显式网格项的行。在问题代码中，我也看到项目水平居中。在这种情况下，只需使用placeitems:center而不是alignitems:center。
对于更现代的解决方案，如果不需要支持旧版浏览器，您可以这样做：
.框架{显示：柔性；/**取消注释下面的“对齐内容”，使其水平居中。✪ 阅读以下内容，了解垂直和水平居中的更好方法。**//*对齐内容：中心*/对齐项目：居中；}国际货币基金组织{高度：自动；/**✪ 为了使该图像垂直和水平居中，在上面的.frame规则中，注释“justify content”和“对齐项目”声明，然后取消注释“margin:auto；”在下面**//*边距：自动*/}/*演示不需要的造型材料*/.框架{最大宽度：900px；高度：200px；边距：自动；背景：#222；}p型{最大宽度：900px；边距：20px自动0；}国际货币基金组织{宽度：150px；}<div class=“frame”><img src=“https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png"></div>
这是一支使用Flexbox的钢笔：http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
编辑1/13/22
有一种更好的方法可以使用CSS网格和地方内容速记来实现这一点：
.frame文本网格{显示：栅格；放置内容：中心；/**✪ “放置内容”是“对齐内容”和“调整内容”的缩写。✪ “放置内容”速记需要两个值，第一个用于“对齐内容”，第二个用于“调整内容”。如果仅存在一个值（如本演示中所示），则该值将应用于两个方向。✪ 注释上面的“place content:center；”声明，以查看元素如何沿着容器的高度分布。**/}<div class=“ctnr框架文本网格”><h2>使用Grid和<code>放置内容</code></h2><p>垂直和水平居中只需要两条线</p＞</div>
这是一支使用CSS网格的钢笔：https://codepen.io/ricardozea/pen/c4e27f1e74542618d73e21f7c2276272?editors=0100
背景图像解决方案
我完全删除了image元素，并使用.frame类将其设置为div的背景
http://jsfiddle.net/URVKa/2/
这至少在Internet Explorer 8、Firefox 6和Chrome 13上运行良好。
我检查过了，这个解决方案无法缩小超过25像素高度的图像。有一个名为backgroundsize的属性可以设置元素的大小，但CSS 3会与Internet Explorer 7的要求相冲突。
我建议你要么重做你的浏览器优先级，为最好的可用浏览器设计，要么获取一些服务器端代码来调整图像大小，如果你想使用这个解决方案。
http://jsfiddle.net/MBs64/
.frame {
height: 35px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
display: table-cell;
vertical-align: middle;
}
img {
background: #3A6F9A;
display: block;
max-height: 35px;
max-width: 160px;
}
关键属性是显示：表单元格；for.frame.Div.frame显示为与此内联，因此需要将其包装在块元素中。
这适用于Firefox、Opera、Chrome、Safari和Internet Explorer 8（及更高版本）。
更新
对于Internet Explorer 7，我们需要添加一个CSS表达式：
*:first-child+html img {
position: relative;
top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
我所知道的唯一（也是最好的跨浏览器）方法是在两个元素上使用高度为100%、垂直对齐为中间的内联块帮助器。
因此有一个解决方案：http://jsfiddle.net/kizu/4RPFa/4570/
.框架{高度：25px；/*等于最大图像高度*/宽度：160px；边框：1px纯红色；空白：nowrap；/*这是必需的，除非您将helper span放在img附近*/文本对齐：居中；边距：1em 0；}.helper{显示：内联块；高度：100%；垂直对齐：中间；}国际货币基金组织{背景：#3A6F9A；垂直对齐：中间；最大高度：25px；最大宽度：160px；}<div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=250px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=25px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=23px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=21px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=19px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=17px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=15px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=13px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=11px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=9px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=7px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=5px/></div><div class=“frame”><span class=“helper”></span><img src=“http://jsfiddle.net/img/logo.png“高度=3px/></div>
或者，如果您不想在现代浏览器中使用额外的元素，也不介意使用Internet Explorer表达式，您可以使用伪元素，并使用方便的表达式将其添加到Internet Explorer中，每个元素只运行一次，这样就不会有任何性能问题：
Internet Explorer的解决方案包括：before和expression（）：http://jsfiddle.net/kizu/4RPFa/4571/
.框架{高度：25px；/*等于最大图像高度*/宽度：160px；边框：1px纯红色；空白：nowrap；文本对齐：居中；边距：1em 0；}.frame:之前，.frame_前面{内容：“”；显示：内联块；高度：100%；垂直对齐：中间；}国际货币基金组织{背景：#3A6F9A；垂直对齐：中间；最大高度：25px；最大宽度：160px；}/*将此移至条件注释*/.框架{列表样式：无；行为：表达式(函数（t）{t.insertAdjacentHTML（'afterBegin'，'<span class=“frame_before”></span>'）；t.runtimeStyle.behavior='none'；}（本）);}<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=250px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=25px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=23px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=21px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=19px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=17px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=15px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=13px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=11px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=9px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“height=7px/></div>”<div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“高度=5px/></div><div class=“frame”><img src=“http://jsfiddle.net/img/logo.png“高度=3px/></div>
工作原理：
当两个内联块元素彼此靠近时，可以将每个元素对齐到另一侧，因此使用垂直对齐：中间，您将得到如下结果：当您有一个固定高度的块（以像素、em或其他绝对单位表示）时，可以将内部块的高度设置为%。因此，在具有固定高度的块中添加一个高度为100%的内联块将使其中的另一个内联块元素（在您的情况下是<img/>）垂直靠近它。
