Html 如何垂直居中放置大小可以在div中更改的图像？

当我不知道图像的高度时，如何使用css将图像垂直居中？服务器将在运行时提供映像以及高度，可以是任意数量的高度。知道了这一点，我在一个div中创建了一个div，或多或少遵循了教程中的方法1:。但我相信，只有当你知道你试图集中的内容的高度时，这才有效。那么我到底该如何垂直居中：

<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中添加以下内容：

---

垂直对齐：中心对齐；或垂直对齐：中间对齐

我会首先计算容器和图像之间的高度差，然后将其一分为二，并将其作为页边顶部

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

您可以通过JS实现这一点，服务器端甚至可以更好地处理人们出于任何原因关闭JS的情况

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

.galleryImg{页边空白顶部：px；}

这是一种可靠的方法

或CSS3方式

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

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

.imageContainer{
高度：300px；
显示：-网络工具包盒；
-webkit框对齐：居中；
显示器：-moz盒；
-moz框对齐：居中；
显示：-ms flexbox；
-ms框对齐：居中；
显示：框；
框对齐：居中；
}

---

<> P>为了支持老浏览器，你也可以考虑使用。虽然我自己没有使用过这个，但它似乎是一个不错的选择。

在div上使用表显示属性。虽然不漂亮，但它很管用

---

表格单元格能够将其内容垂直居中对齐。因此，我们需要将div的“display”属性更改为“table cell”，从而将其行为更改为table cell

现在请检查下面的代码，看到相应div中的图像与中心垂直对齐

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

希望它能帮助您。

/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();
});

---

下面是一个实时示例，您如何将图像居中到任何div 有一些额外的css美化，但你可以忽略它

---

---

我很感激，我当然也在考虑。但我真的很想用“正确的方式”去做，我希望这里的一位大师有一些秘密的忍者黑客来实现这一点。我已经投入了足够的时间，因为这更多的是个人恩怨，而不是工作要求。编辑：现在我回复删除的评论看起来很傻。总而言之：表格布局-我知道这是一个选项，但我不想。纠正我之前的评论，看看这一条（实际上有点重复，如果我错了请纠正我：）如何使用定位@EranMedan这个解决方案是完美的，除了它在我的internet explorer中绝对爆炸。在其他浏览器中都是完美的，而且在许多情况下它显然在IE上工作，但至少在我的情况下，浮动div或某些东西一定会引起问题。@Musa这是一个跨浏览器的解决方案吗？知道向后兼容的程度吗？a）没有垂直对齐：中心对齐和b）这不起作用。最好在评论之前先检查一下。有垂直对齐：中心对齐；并且正在工作。垂直对齐仅在以与表格相关的方式显示的元素上按预期工作。虽然我知道这个解决方案，但我正试图通过避免使用表格来定位，从而更符合标准。如果您知道一种使垂直对齐的方法：在非表元素上居中工作，您能扩展您的答案并向我们展示如何进行吗？我认为你是一个天才，我个人，我肯定会开始抵消你的选票：）字体大小：11px；页边距顶部：表达式（this.offsetHeight我还没有在IE7上测试过它。如果不起作用，请告诉我这很好。如果可以的话，我想尽量避免使用jquery和javascript，即使只是为了让自己感觉“干净”。但如果找不到纯CSS解决方案，我肯定会接受这个答案，因为我看不出为什么它不麻烦跨浏览器和向后兼容。（是的，这个答案是正确的，但正如我在前面的评论中提到的，我希望这样做，而不依赖于旧的表格居中方法，因为我试图向前思考并符合标准。不过感谢你的回答：）我不确定是否有其他方法可以使用CSS垂直居中。这相当愚蠢，但这可能是唯一的办法。它没有任何违背“标准”的地方——它都是有效的CSS。@ChrisBarr我在回答中添加了另一个解决方案——您可以使用CSS3的新“flexbox”选项。虽然公平地说，我自己还是会坚持使用table cell。我已经用它做了很多实验，包括跨浏览器、后台兼容等等。此外，我还调查了Chris Barr关于这一点的回应，他认为这符合标准，可以肯定的是，虽然实际使用表格是不受欢迎的，但显示器的性能完全是晴朗的。谢谢大家，我学到了很多。对于那些在我之后遇到同样问题的人：只需使用tabledisplayproperties方法。它可以工作，并且它是跨/向后兼容的，并且符合引导标准！谢谢，不幸的是，正如我在其他评论中提到的那样，我正在寻找一种非表方式来实现它。我将用这个警告更新主要问题。我们这里不使用表，我们只是将css显示属性添加到div。但是，只有html和css无法做到这一点，这是不幸的。有一种方法。你只是不接受它是有效的。“display:table cell；”只需要html和css，是完全合法的。在CSS中，并非所有内容都具有完美的语义。“我不会把时间浪费在过分担心这件事上。”fildred13在为您做了更多的挖掘之后，我已经更新了答案以提供更多信息

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

$(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();
});

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

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

}