不知道图片尺寸如何垂直居中图片

Question

在我的Web开发职业生涯中，我经常需要居中各种东西。但是我想知道是否有一种简单的方法可以垂直居中一张图片而不需要知道图片的尺寸。比如从数据库获取缩略图列表，我不希望每个项目都紧贴父级div的顶部。

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png" />
    </div>
</div>

- dreagan

Answer 1

您可以在父级元素上使用以下CSS代码：

#parent {
    display:table-cell;
    vertical-align:middle;
}

请注意，这将使父元素的行为类似于内联元素。 示例。

- Purag

---

好的，它会使父元素表现得像一个表格单元格。 - user123444555621

Answer 2

如果您的设计不允许您将parent设置为内联元素（如果允许，请使用Purmou的解决方案，它更好），您可以在parent上设置line-height等于其height并在img上设置vertical-align：middle;。

演示：http://jsfiddle.net/ThinkingStiff/YRGBk/ HTML:

<div id="wrapper">
    <div id="parent">
        <img src="http://placehold.it/200x200" />
    </div>
</div>

CSS：

img {
    vertical-align: middle;
}

#parent {
    height:400px;
    border:1px solid black;
    line-height: 400px;
}

输出：

- ThinkingStiff

Answer 3

#parent img{vertical-align:middle;}

- Philip

---

@Purmou 当然可以。你只需要在#parent上设置一个高度即可。 - Ariel

Answer 4

即使没有JavaScript，也有一个技巧可以做到这一点。我们需要知道父元素的高度，还需要一个标签。

首先，在IMG标签之前或之后添加一个SPAN标签：

<div id="wrapper">
   <div id="parent">
      <span>&nbsp;</span><img src="path/i/got/from/database/image.png" />
   </div>
</div>

通过以下CSS声明，可以将图像对齐到所需位置：

#parent {
   height: 500px;      /* This height is important for the following lines */

   line-height: 500px; /* Text-content needs to get full height for the
                          'vertical-align'-attribute to work */
}
#parent span {
   display: inline-block; /* Should work even for IE6/7 in this case */

   height: 500px;         /* Needed for IE */

   width: 10px;
   margin-right: -10px;   /* Any element to the right is pushed to the left
                             offset of the SPAN-tag */ 
}
#parent img {
   vertical-align: middle; /* Aligns the image in the middle of the SPAN-tag */
}

这应该可以在IE6和7上运行。

编辑：

• ThinkingStiffs的解决方案更简单，因此更好。但它在IE6上无法工作。

• Purmous的解决方案对于IE6和7不起作用，请参见显示声明

- spaark

Answer 5

我在搜索类似问题的解决方案时发现了这个。该解决方案使用CSS3，因此无法在IE8及以下版本上运行。

虽然这是一个旧问题，但我认为更新的答案可能对某些人有用：

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png">
    </div>
</div>

#parent{
    width:400px;
    height:400px;
    background:red; /* just used to highlight box */
    text-align:center;
}    
#parent img{
    position:relative;   
    top: 50%;
    transform: translateY(-50%);
}

请参阅此代码片段：http://jsfiddle.net/E9sTk/。

- BrochanGuMor

Answer 6

你可以使用这个：

#wrapper{    
height: 100%;
min-height: 500px;/*Assuming min-height of the container*/
position: relative;
width: 100%;}

#parent{    
border: 1px solid;
height: 50px;
position: absolute;
top: 50%;
width: 50px;}

也可以在fiddle上查看 http://jsfiddle.net/kYgqx/2/

- Gurvinder