如何在一个 div 中垂直居中大小可能改变的图片？

Question

当我不知道图像的高度时，如何使用CSS垂直居中图像？图像及其高度将由服务器在运行时提供，并且它可以是任意数量的高度。因此，我创建了一个div内部的div，或多或少地遵循此处找到的教程的第1种方法：http://phrogz.net/css/vertical-align/。但是我认为这仅适用于您知道要居中的内容的高度的情况。那么我该如何垂直居中这个图像呢？

<div class="galleryItem">
    <a href="wherever">
    <img src="whatever" width="173" height="155">
       <div class="galleryTitle">
           <div class="galleryImg">
               <img src="centerMeVertically.jpg">
           </div>
       </div>
    </a>
</div>

这是失败的CSS代码：

   .galleryItem {
    float: left;
    border-style: solid;
    border-width: 1px;
    border-color: #b78e18;
    margin: 7px 4px;
    padding: 5px;
    width: 173px;
    height: 190px;
    position: relative;
}

.galleryTitle {
    height: 33px;
    width: 173px;
    position: relative;
}

.galleryImg {
     width: 173px;
     height: 30px;
     position: absolute;
     top: 50%;
     margin-top: -15px;
 }

.galleryImg > img {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

- fildred13

---

更正我的上一条评论，看看这个（实际上有点重复了，如果我错了请纠正：https://dev59.com/uGw05IYBdhLWcg3wfx40） - Eran Medan

使用定位怎么样？http://jsfiddle.net/m6GHX/ - Musa

@Musa 这是一个跨浏览器的解决方案吗？你知道它向后兼容到哪个版本吗？ - fildred13

我有疑问，测试一下就知道了。 - Musa

可以这样做，但如果不是这样做的话，那就不是一个解决方案。最低要求是IE 7+，8+是绝对最低要求，而且这还是在7上能够通过的情况下。 - fildred13

Answer 1

表格单元格具有将其内容垂直居中的功能。因此，我们需要通过将其“display”属性更改为“table cell”来改变div的行为，使其成为表格单元格。

现在请检查下面的代码，看看相应div中的图像是否垂直居中对齐。

.galleryImg {
   display: table-cell;
   height: 60px;
   vertical-align: middle;
   width: 173px;
}

希望这能对你有所帮助。

- Prasanth K C

---

是的，这个答案是正确的，但正如我在之前的评论中提到的，我希望能够不依赖于旧的表格居中方法来完成它，因为我正在尝试向前看并符合标准。不过还是谢谢你的回答 :) - fildred13

我不确定除了这种方法，是否还有其他使用CSS垂直居中的方式。虽然它相当愚蠢，但这可能是唯一的方法。它并没有违反“标准”的任何内容 - 它是有效的CSS。 - FiniteLooper

@ChrisBarr 我在我的回答中增加了另一种解决方案 - 你可以使用CSS3的新“flexbox”选项。虽然公平地说，我会坚持使用table-cell。 - daamsie

我已经进行了很多实验，跨浏览器、向后兼容等等都试过了。此外，我查看了Chris Barr的回复，他认为这符合标准，确实，虽然使用表格被认为是不好的，但是显示属性非常清晰。所以感谢大家，我学到了很多。对于那些遇到相同问题的人：只需使用表格显示属性方法即可。它可以运行，并且具有跨浏览器/向后兼容性并符合标准！ - fildred13

Answer 2

//JQuery

$(function(){
    // vertical align images
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();        
            var mh = Math.ceil((ph-ah) / 2); //var mh = (ph - ah) / 2;
            $(this).css('margin-top', mh);
            //console.log(mh);
        });
    };
    $('.galleryItem img').vAlign();
});

- Pramod Bhoi

---

这很好。如果可能的话，我想避免使用jQuery和JavaScript，只是为了让一切都感觉“清洁”。但是，如果没有找到纯CSS解决方案，我肯定会接受这个答案，因为我认为它不会影响跨浏览器和向后兼容性。（<3 jQuery.） - fildred13

Answer 3

这是一个实时示例，展示如何将图片居中到任何 div 中。有一些额外的 CSS 可以美化，但您可以忽略它。

http://jsfiddle.net/pratswinz/vCBnD/

<div class="span2 cen_eventspan2">
            <figure class="span12 cen_event">
                <img class="img-polaroid-user" src="https://www.dropbox.com/s/j4x8plvaupv0ftp/AC_Feedback-box-buttons_unlcear_b.png" />
            </figure>
        </div>

Sorry, I cannot translate without a specific text to be translated. Please provide the text.

.cen_event {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 172px;
    line-height: 159px;
    padding: 4px;
    text-align: center;
    width: 182px;
}
.cen_event .img-polaroid-user {
    max-height: 160px;
    max-width: 172px;
    vertical-align: middle;
    border:1px solid #f00;

}

- Pratswinz

Answer 4

我会先计算容器和图像之间的高度差，然后将其除以二，并将其作为margin-top。

所需边距=（容器高度-图像高度）/ 2

您可以通过JS来实现这一点，或者更好的是通过服务器端来处理人们因某种原因关闭JS的情况。

.galleryImg img {margin-top:<requiredMargin>px;}

这是一种可靠的方法。

或者，CSS3 的方式

如果你只想使用 CSS，并且只支持最新的浏览器，那么你可以考虑使用 Flexbox：

<div class="imageContainer">
    <img src="http://placehold.it/350x100">
</div>

<style>
.imageContainer {
   height:300px;
   display: -webkit-box;
    -webkit-box-align: center;
   display: -moz-box;
   -moz-box-align: center;
   display: -ms-flexbox;
   -ms-box-align: center; 
   display: box;
   box-align: center; 
}
</style>

http://jsfiddle.net/gp5Ry/1/

为了支持旧版浏览器，您可以考虑使用Flexie。虽然我自己没有使用过它，但它似乎是一个不错的选择。

- daamsie

---

但是仅使用HTML和CSS无法完成这项工作，这很不幸。 - fildred13

好的，有一种方法。你只是不接受它作为有效的方式。“display: table-cell;”只需要HTML和CSS，是完全合法的。并非所有CSS都始终完全语义化。我不会浪费太多时间过度担心这个问题。 - daamsie

@fildred13 经过更深入的挖掘，我更新了答案，提供了另一种不需要任何表格单元选项的选择。我个人仍然会使用表格单元来覆盖旧浏览器。但对于纯粹主义者来说，这应该可以满足所有要求。 - daamsie

Answer 5

使用表格显示属性在您的div上。这不是很漂亮，但它有效。

http://jsfiddle.net/staircasebug/dv9RS/

.galleryTitle {
display: table;
width: 100%;
height: 300px;
background: #eee;
}

.galleryImg {
display: table-cell;
vertical-align: middle;
}

img {
margin: 0 auto;
display: block;
}

- staircasebug

---

谢谢，不幸的是我正在寻找一种非表格的方法来完成它，正如我在其他评论中提到的那样。我将在主要问题中更新这个注意事项。 - fildred13

我们这里不使用表格，只是在 div 中添加 CSS 显示属性。 - staircasebug

Answer 6

请在CSS中添加以下内容：

vertical-align: central; 或 vertical-align: middle;

- Sweety

---

a) 没有 vertical-align:central;。 b) 这样做不起作用。 - j08691

在评论之前最好先检查一下。有vertical-align: central;并且它是有效的。 - Sweety

vertical-align 只对以表格方式显示的元素有效。虽然我知道这种解决方案，但我试图通过避免使用表格来实现更符合标准的效果。如果您知道在非表格元素上使 vertical-align: central 生效的方法，能否展开您的答案并向我们展示呢？我个人认为您是个天才，我肯定会开始抵消您的负投票 :) - fildred13

尝试使用以下样式：position: relative; font-size: 11px; margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0"); 我还没有在IE7上测试过，请告诉我它是否可行。 - Sweety