如何在div中垂直对齐图像

这适用于现代浏览器（2016年编辑时），如图所示coDepen上的演示

.frame {height: 25px;line-height: 25px;width: 160px;border: 1px solid #83A7D3;}.frame img {background: #3A6F9A;display:inline-block;vertical-align: middle;}

非常重要的是，您要么给图像一个类，要么使用继承来定位您需要居中的图像。在这个例子中，我们使用了.frame img {}，这样只有由具有.frame类的div包装的图像才会成为目标。

背景图像解决方案

我完全删除了图像元素并将其设置为具有.frame类的div的背景

http://jsfiddle.net/URVKa/2/

这至少在Internet Explorer 8，Firefox 6和Chrome13上运行良好。

我检查了一下，这个解决方案不适用于缩小大于25像素高度的图像。有一个名为background-size的属性确实设置了元素的大小，但它是CSS 3，它会与Internet Explorer 7的要求相冲突。

我建议你要么重做你的浏览器优先级和设计最好的可用浏览器，或者得到一些服务器端代码来调整图像的大小，如果你想使用这个解决方案。

你可以这样做：

Demo

http://jsfiddle.net/DZ8vW/1

css

.frame {height: 25px;      /* Equals maximum image height */line-height: 25px;width: 160px;border: 1px solid red;    
text-align: center;margin: 1em 0;position: relative; /* Changes here... */}img {background: #3A6F9A;max-height: 25px;max-width: 160px;top: 50%;           /* Here.. */left: 50%;          /* Here... */position: absolute; /* And here */}

javascript

$("img").each(function(){this.style.marginTop = $(this).height() / -2 + "px";})

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;}

.frame的键属性是display: table-cell;。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");}

纯 CSS解决方案：

.frame {margin: 1em 0;height: 35px;width: 160px;border: 1px solid red;position: relative;}
img {max-height: 25px;max-width: 160px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;background: #3A6F9A;}

<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=250 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=25 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=23 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=21 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=19 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=17 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=15 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=13 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=11 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=9 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=7 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=5 /></div><div class=frame><img src="http://jsfiddle.net/img/logo.png" height=3 /></div>

关键的东西

// position: relative; - in .frame holds the absolute element within the frame// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component// margin: auto; - centers the image horizontally & vertically

使用纯CSShttp://jsfiddle.net/sandeep/4RPFa/72/尝试此解决方案

也许这是超文本标记语言的主要问题。在超文本标记语言中定义class和image height时，您没有使用引号。

css：

.frame {height: 25px;      /* Equals maximum image height */width: 160px;border: 1px solid red;position: relative;margin: 1em 0;top: 50%;text-align: center;line-height: 24px;margin-bottom: 20px;}
img {background: #3A6F9A;vertical-align: middle;line-height: 0;margin: 0 auto;max-height: 25px;}

当我使用img标签时，它从top留下3像素到2像素的空间。现在我减少line-height，它起作用了。

css：

    .frame {height: 25px;      /* Equals maximum image height */width: 160px;border: 1px solid red;margin: 1em 0;text-align: center;line-height: 22px;*:first-child+html line-height:24px; /* For Internet Explorer 7 */}
img {background: #3A6F9A;vertical-align: middle;line-height: 0;max-height: 25px;max-width: 160px;}@media screen and (-webkit-min-device-pixel-ratio:0) {.frame {line-height:20px; /* WebKit browsers */}

line-height属性在不同的浏览器中呈现不同。因此，我们必须定义不同的line-height属性浏览器。

查看此示例：http://jsfiddle.net/sandeep/4be8t/11/

检查此示例关于不同浏览器中的line-height不同：Firefox和Chrome中的输入高度差异

据我所知，唯一（也是最好的跨浏览器）方法是在两个元素上使用height: 100%和vertical-align: middle的inline-block助手。

所以有一个解决方案：http://jsfiddle.net/kizu/4RPFa/4570/

.frame {height: 25px;      /* Equals maximum image height */width: 160px;border: 1px solid red;white-space: nowrap; /* This is required unless you put the helper span closely near the img */
text-align: center;margin: 1em 0;}
.helper {display: inline-block;height: 100%;vertical-align: middle;}
img {background: #3A6F9A;vertical-align: middle;max-height: 25px;max-width: 160px;}

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

或者，如果您不想在现代浏览器中拥有额外的元素并且不介意使用Internet Explorer表达式，您可以使用伪元素并使用方便的表达式将其添加到Internet Explorer，每个元素仅运行一次，因此不会有任何性能问题：

Internet Explorer的:before和expression()解决方案：http://jsfiddle.net/kizu/4RPFa/4571/

.frame {height: 25px;      /* Equals maximum image height */width: 160px;border: 1px solid red;white-space: nowrap;
text-align: center;margin: 1em 0;}
.frame:before,.frame_before {content: "";display: inline-block;height: 100%;vertical-align: middle;}
img {background: #3A6F9A;vertical-align: middle;max-height: 25px;max-width: 160px;}
/* Move this to conditional comments */.frame {list-style:none;behavior: expression(function(t){t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');t.runtimeStyle.behavior = 'none';}(this));}

<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" height=5px /></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

它是如何工作的：

1. 当你有两个inline-block元素彼此靠近时，你可以将彼此对齐到对方的一侧，所以使用vertical-align: middle你会得到这样的东西：

   

2. 当你有一个固定高度的块（在px、em或其他绝对单位中）时，你可以在%中设置内部块的高度。

3. 因此，在具有固定高度的块中添加一个inline-block和height: 100%将使其中的另一个inline-block元素（在您的情况下为<img/>）垂直靠近它。

您可以尝试将PI的CSS设置为display: table-cell; vertical-align: middle;

如果您可以使用像素大小的边距，只需将font-size: 1px;添加到.frame。但请记住，现在在.frame 1em=1px上，这意味着您也需要以像素为单位设置边距。

http://jsfiddle.net/feeela/4RPFa/96/

现在它不再集中在歌剧中…

这可能有用：

div {position: relative;width: 200px;height: 200px;}img {position: absolute;top: 0;bottom: 0;margin: auto;}.image {min-height: 50px}

我有同样的问题。这对我有用：

<style type="text/css">div.parent {position: relative;}
img.child {bottom: 0;left: 0;margin: auto;position: absolute;right: 0;top: 0;}</style>
<div class="parent"><img class="child"></div>

我的解决方案：http://jsfiddle.net/XNAj6/2/

<div class="container"><div class="frame"><img src="http://jsfiddle.net/img/logo.png" class="img" alt="" /></div></div>
.container {display: table;float: left;border: solid black 1px;margin: 2px;padding: 0;background-color: black;width: 150px;height: 150px;}.frame {display: table-cell;text-align: center;vertical-align: middle;border-width: 0;}.img {max-width: 150px;max-height: 150px;vertical-align: middle;}

matejKramny的解决方案是一个好的开始，但过大的图像有一个错误的比例。

这是我的叉子：

演示：https://jsbin.com/lidebapomi/edit?html，CSS，输出

超文本标记语言：

<div class="frame"><img src="foo"/></div>

css：

.frame {height: 160px; /* Can be anything */width: 160px; /* Can be anything */position: relative;}img {max-height: 100%;max-width: 100%;width: auto;height: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

通过这种方式，您可以垂直居中图像（demo）：

div{height: 150px; // Internet Explorer 7 fixline-height: 150px;}img{vertical-align: middle;margin-bottom: 0.25em;}

我不确定Internet Explorer，但在Firefox和Chrome下，如果您在div容器中有img，则以下CSS内容应该可以工作。至少对我来说它工作得很好：

div.img-container {display: table-cell;vertical-align: middle;height: 450px;width: 490px;}
div.img-container img {max-height: 450px;max-width: 490px;}

只是为了这是一个有效的答案，我仍然想再次发布jQuery解决方案。这适用于应用了v_align类的每个元素。它将在父级中垂直居中，并在调整窗口大小时重新计算。

链接到JSFiddle

$(document).ready(function() {// Define the class that vertically aligns stuffvar objects = '.v_align';// initial setupverticalAlign(objects);
// Register resize event listener$(window).resize(function() {verticalAlign(objects);});});
function verticalAlign(selector) {$(selector).each(function(val) {var parent_height = $(this).parent().height();var dif = parent_height - $(this).height()// Should only work if the parent is larger than the elementvar margin_top = dif > 0 ? dif/2 : 0;$(this).css("margin-top", margin_top + "px");});}

最好的解决办法是

.block{/* Decor */padding:0 20px;background: #666;border: 2px solid #fff;text-align: center;/* Important */min-height: 220px;width: 260px;white-space: nowrap;}.block:after{content: '';display: inline-block;height: 220px; /* The same as min-height */width: 1px;overflow: hidden;margin: 0 0 0 -5px;vertical-align: middle;}.block span{vertical-align: middle;display: inline-block;white-space: normal;}

三线解决方案：

position: relative;top: 50%;transform: translateY(-50%);

这适用于任何事情。

从这里。

一个简单的方法为我工作：

img {vertical-align: middle;display: inline-block;position: relative;}

它适用于谷歌Chrome非常好。试试这个在不同的浏览器。

我一直在使用填充来进行中心对齐。您需要定义顶级外部容器大小，但内部容器应该调整大小，您可以将填充设置为不同的百分比值。

jsfiddle

<div class='container'><img src='image.jpg' /></div>
.container {padding: 20%;background-color: blue;}
img {width: 100%;}

对于更现代的解决方案，如果不需要支持旧版浏览器，您可以这样做：

.frame {display: flex;/**Uncomment 'justify-content' below to center horizontally.✪ Read below for a better way to center vertically and horizontally.**/
/* justify-content: center; */align-items: center;}
img {height: auto;
/**✪ To center this image both vertically and horizontally,in the .frame rule above comment the 'justify-content'and 'align-items' declarations,then uncomment 'margin: auto;' below.**/
/* margin: auto; */}
/* Styling stuff not needed for demo */.frame {max-width: 900px;height: 200px;margin: auto;background: #222;}p {max-width: 900px;margin: 20px auto 0;}img {width: 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 Grid和place-content速记来做到这一点：

.frame-text-grid {display: grid;place-content: center;/**✪ "place-content" is the shorthand for "align-content" and "justify-content".✪ The "place-content" shorthand requires two values, the first one is for "align-content" and the second one for "justify-content". If only one value is present (like in this demo), then that single value is applied to both directions.✪ Comment the "place-content: center;" declaration above to see how the elements are spread along the height of the container.**/}

<div class="ctnr frame-text-grid"><h2>Using Grid and <code>place-content</code></h2><p>Only two lines are needed to center vertically and horizontally.</p></div>

这是一个使用CSS网格的笔：https://codepen.io/ricardozea/pen/c4e27f1e74542618d73e21f7c2276272?editors=0100

有一个超级容易的解决方案Flexbox！

.frame {display: flex;align-items: center;}

您可以尝试以下代码：

.frame{display: flex;justify-content: center;align-items: center;width: 100%;}

<div class="frame" style="height: 25px;"><img src="http://jsfiddle.net/img/logo.png" /></div>

使用表格和表格单元格的解决方案

有时它应该通过显示为table/table-cell来解决。例如，快速标题屏幕。这也是W3推荐的方式。我建议您从W3C.org.检查这个名为将块或图像居中的链接

这里使用的提示是：

• 绝对定位容器显示为表格
• 垂直对齐到中心内容，显示为表格单元格

.container {position: absolute;display: table;width: 100%;height: 100%;}.content {display: table-cell;vertical-align: middle;}

<div class="container"><div class="content"><h1 style="text-align:center">Peace in the world</h1></div></div>

就个人而言，我实际上不同意为此目的使用助手。

使用这个：

position: absolute;top: calc(50% - 0.5em);left: calc(50% - 0.5em);line-height: 1em;

你可以改变font-size。

想要对齐在文本/标题之后并且两者都在div内的图像？

请参阅JSfiddle或运行代码片段。

只要确保所有元素（div、img、title等）都有一个ID或类。

对于我来说，这个解决方案适用于所有浏览器（对于移动设备，您必须使用：@media来调整您的代码）。

h2.h2red {color: red;font-size: 14px;}.mydivclass {margin-top: 30px;display: block;}img.mydesiredclass {margin-right: 10px;display: block;float: left; /* If you want to allign the text with an image on the same row */width: 100px;heght: 100px;margin-top: -40px /* Change this value to adapt to your page */;}

<div class="mydivclass"><br /><img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png"><h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2></div>

您可以在div中使用表结构

<div class="frame"><table width="100%"><tr><td vertical-align="middle" align="center" height="25"><img src="https://jsfiddle.net/img/logo.png" ></td></tr></table></div>

使用table和table-cell方法完成这项工作，特别是因为您也针对一些旧浏览器，我为您创建了一个片段，您可以运行它并检查结果：

.wrapper {position: relative;display: table;width: 300px;height: 200px;}
.inside {vertical-align: middle;display: table-cell;}

<div class="wrapper"><div class="inside"><p>Centre me please!!!</p></div><div class="inside"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /></div></div> 

对于在容器内居中的图像（它可以是一个徽标），除了像这样的文本：

基本上你包装图像

.outer-frame {border: 1px solid red;min-height: 200px;text-align: center; /* Only to align horizontally */}
.wrapper{line-height: 200px;border: 2px dashed blue;border-radius: 20px;margin: 50px}
img {/* height: auto; */vertical-align: middle;   /* Only to align vertically */}

<div class="outer-frame"><div class="wrapper">some text<img src="http://via.placeholder.com/150x150"></div></div>

这个代码对我很有效。

<style>.listing_container{width:300px; height:300px;font: 0/0 a;}.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}.listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}<style>
<div class="listing_container"><img src="http://www.advancewebsites.com/img/theme1/logo.png"></div>

您可以使用grid布局将图像垂直居中。

.frame {display: grid;grid-template-areas: ".""img""."grid-template-rows: 1fr auto 1fr;grid-template-columns: auto;}.frame img {grid-area: img;}

这将创建一个3行1列的网格布局，顶部和底部有未命名的1个分数宽间隔，以及一个名为img的auto高度（内容大小）的区域。

img将使用它喜欢的空间，顶部和底部的间隔将使用剩余的高度分割为两个相等的分数，从而导致img元素垂直居中。

http://jsfiddle.net/Kissaki0/4RPFa/20713/

此外，您可以使用Flexbox获得正确的结果：

.parent {align-items: center; /* For vertical align */background: red;display: flex;height: 250px;/* justify-content: center; <- for horizontal align */width: 250px;}

<div class="parent"><img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /></div>

你可以使用这个：

 .loaderimage {position: absolute;top: 50%;left: 50%;width: 60px;height: 60px;margin-top: -30px; /* 50% of the height */margin-left: -30px;}

我正在寻找一个类似的答案，一些建议将图像向左捕捉或垂直比例压扁图像，所以我想出了这个解决方案……它将内容垂直和水平居中。

 .div{position: relative;overflow: hidden;}.bantop img {position: absolute;margin: auto;width: 103%;height: auto;top: -50%;bottom: -50%;left: -50%;right: -50%;}

我在几个项目中使用它，它就像一个魅力。

想象一下你有

<div class="wrap"><img src="#"></div>

和css：

.wrap {display: flex;}.wrap img {object-fit: contain;}

CSS网格

如果您想在图像容器内垂直对齐单个图像，您可以使用以下命令：

.img-container {display: grid;}
img {align-self: center;}

.img-container {display: grid;grid-auto-flow: column;background: #BADA55;width: 1200px;height: 500px;}
img.vertical-align {align-self: center;}

<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-container {display: grid;grid-auto-flow: column;align-items: center;background: #BADA55;width: 1200px;height: 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，因为否则元素会通过指定显式网格项包装到一行。在问题代码中，我看到项目也水平居中。在这种情况下，只需使用place-items: center而不是align-items: center。

我为这个老问题添加了一个新的解决方案，因为我看到我喜欢的方法没有包含在答案中。

在每个项目中，在一开始，我创建了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-为中心对于页面上的图像和内容更通用，以abs为中心的需要一个相对的父级对于居中的div很好，比如弹出窗口。

所以你只要打电话

   <div class='flex-centered'><img></div>

图像是垂直居中的。

.flex-centered {display: flex;flex-direction: column;justify-content: center;}
/* this to center horizontally, too */.m0a {margin: 0 auto}
/* Make a big parent grey */.big-div {height:200px;width: 200px;background:#ccc;border-radius: 4px;} 
/* Make a small div to be centered */.small-div {height:20px;width:20px;background:red;}

<div class="flex-centered big-div" ><div class="small-div m0a"></div></div>