如何使用 CSS 将 HTML 中的 div 元素内的图像垂直居中？

Question

我有这样的标记：

<div>
  <img />
</div>

div 高于 img：

div {
  height: 100px;
}

img {
  height: dynamic-value-smaller-than-100px;
}

我需要图像位于 div 的中间（其上方和下方具有相同数量的空白）。

我尝试了这个，但它不起作用：

div {
  vertical-align: middle;
}

Answer 1

如果您的图像纯粹是装饰性的，那么将其用作背景图像可能是一个更具语义的解决方案。然后，您可以指定背景的位置。

background-position: center center;

如果它不是装饰性的并且构成有价值的信息，那么 img 标签是合理的。在这种情况下，您需要做的是使用以下属性设置包含 div 的样式：

div{
    display: table-cell; vertical-align: middle 
}

了解有关此技术的更多信息在这里。据报告不适用于 IE6/7（适用于 IE8）。

Answer 2

另一种方法是在容器 div 中设置行高，并使用 Vertical-align: middle 将图像与图像对齐。

html:

<div class="container"><img></div>

css:

.container {
  width: 200px; /* or whatever you want */
  height: 200px; /* or whatever you want */
  line-height: 200px; /* or whatever you want, should match height */
  text-align: center;
}

.container > img {
  vertical-align: middle;
}

这超出了我的想象。但我以前用过这个——它应该可以解决问题。也适用于较旧的浏览器。

Answer 3

假设您想将图像 (40px X 40px) 放在 div class="box" 的中心（水平和垂直）。所以你有以下 html：

<div class="box"><img /></div>

你所要做的就是应用 CSS：

.box img {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -20px;
}

你的 div 甚至可以改变它的大小，图像将始终位于它的中心。

Answer 4

这是我之前在 CSS 中用来实现垂直居中的解决方案。这适用于所有现代浏览器。

http://www.jakpsatweb.cz/css/css-vertical- center-solution.html

摘录：（

  <div style="display: table; height: 400px; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
      <div style="position: relative; top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

用于演示目的的内联样式）

Answer 5

另一种选择是在 img 上设置 display:block，然后设置 margin: 0px auto;

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

Answer 6

由于我也经常对跨浏览器 CSS 感到失望，因此我想在这里提供一个 JQuery 解决方案。这需要每个图像的父 div 的高度，将其除以二并将其设置为图像和 div 之间的上边距：

$('div img').each(function() {
 m = Math.floor(($(this).parent('div').height() - $(this).height())/2);
 mp = m+"px";
 $(this).css("margin-top",mp);
});

Answer 7

使用纯 CSS 将任意尺寸的图像居中有五种可能的方法。

1. 使用 flex 并使 img 标签位于内部（现代浏览器的最佳解决方案）：

   div {
       显示：柔性；
       对齐项目：居中；
       调整内容：居中
   }
   

2. 将图像放入 背景中-图像并使用background-position（如@pixeline解释）：

   div {
       背景图像： url(...);
       背景位置：center 中心
   }
   

3. 使用 display: table 作为父元素，并使用 display: table-cell 和 vertical-align: middle子元素的代码>：

   div.parent {
       显示：表；
   }
   div.child {
       显示：表格单元格；
       垂直对齐：居中；
   }
   

4. Using position:absolute 和 transform 的图像和父元素位​​置不能取消设置：

   div {
       位置：相对；
   }
   分区>图像{
       位置：绝对；
       左：50%；
       顶部：50%；
       变换：翻译（-50%，-50%）；
   }
   

5. 使用 line-height 作为图像的相同高度元素，然后使用 vertical-align （在我看来，这是支持更多浏览器（如 IE9>）的最佳解决方案）。

   注意：在一些旧的浏览器中，有时为了安全地使用这种方式，您需要在图像存在的行中至少有一个字符。为了解决这个问题，我在父元素的伪元素中使用了不可破坏的空格。

   如下例所示：

   div {
       显示：块；
       高度：200px；
       宽度：200px；
       背景颜色：紫色；
       行高：200px；
       文本对齐：居中；
   }
   div:之后{
     内容：“\a0”；
   }
   分区>图像{
       垂直对齐：居中；
   }

Answer 8

我已经以跨浏览器的方式发布了有关垂直对齐的信息（垂直居中使用 CSS 的多个框）

创建单单元格表格。只有表格具有跨浏览器垂直对齐功能

Answer 9

图像位于 div 的中间

div img{ 
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    height:50px;
    width:50px;
}

Answer 10

在您的示例中，div 的高度是静态的，图像的高度也是静态的。为图像指定 margin-top 值为 ( div_height - image_height ) / 2

如果图像为 50px，则

img {
    margin-top: 25px;
}

Answer 11

您是否尝试过在 div 上设置边距？例如

div {
    padding: 25px, 0
}

顶部和底部。您也许还可以使用百分比：

div {
    padding: 25%, 0
}

Answer 12

<div style="background-color:#006600; width:300px; text-align:center; padding:50px 0px 50px 0px;">
<img src="imges/import.jpg" width="200" height="200"/>
</div>

Answer 13

接受的答案对我不起作用。 vertical-align 需要一个合作伙伴，以便它们可以在中心对齐。因此，我创建了一个空的 div，它具有父 div 的完整高度，但没有可供图像对齐的宽度。两个对象需要 inline-block 才能保持在一行中。

<div>
    <div class="placeholder"></div>
    <img />
</div>

CSS：

.class {
    height: 100%;
    width: 0%;
    vertical-align: middle;
    display: inline-block
}
img {
    display: inline-block;
    vertical-align: middle;
}

Answer 14

div {

width:200px; 
height:150px; 

display:-moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

display:-webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

display:box; 
box-pack:center; 
box-align:center;

}

<div>
<img src="images/logo.png" />
</div>

Answer 15

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {

$.fn.verticalAlign = function() {
    return this.each(function(i){
    var ah = $(this).height();
    var ph = $(this).parent().height();
    var mh = Math.ceil((ph-ah)/2);
    $(this).css('margin-top', mh);
    });
};
})(jQuery);

$(document).ready(function(e) {


$('.in').verticalAlign();


});

</script>

<style type="text/css">
body { margin:0; padding:0;}
.divWrap { width:100%;}
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; }
.in { width:100px; height:100px; background:#CCC; margin:0 auto; }
</style>
</head>

<body>
<div class="divWrap">
<div class="out">
<div class="in">
</div>
</div>
</div>

</body>
</html>

Answer 16

如果您希望内容成为 div 中需要的内容，这对我来说很有效：

<div style="
  display: table-cell;
  vertical-align: middle;
  background-color: blue;
  width: ...px;
  height: ...px;
">
    <div style="
      margin: auto;
      display: block;
      width: fit-content;
    ">
        <!-- CONTENT -->
        <img src="...">
        <p> some text </p>
    </div>
 </div>