在不知道尺寸的情况下垂直居中图像答案

【问题标题】：vertical center an image without knowing dimensions在不知道尺寸的情况下垂直居中图像
【发布时间】：2012-01-29 17:59:38
【问题描述】：

在我的网络开发生涯中，我已经将很多东西居中，但我想知道是否有一种简单的方法可以在不知道图像尺寸的情况下将图像垂直居中。想象一下我从数据库中获得的缩略图列表。我不希望每个项目都粘在父 div 的顶部。

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

【问题讨论】：

标签： html css image center

【解决方案1】：

我在寻找类似问题的解决方案时发现了这一点，该解决方案使用 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/

【讨论】：

【解决方案2】：

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

首先，在 IMG-Tag 之前或之后添加一个 SPAN-tag：

<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，请参阅 The display declaration

【讨论】：

【解决方案3】：

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

演示：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;
}

输出：

【讨论】：

【解决方案4】：

你可以在你的父母身上使用这个 CSS：

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

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

Example.

【讨论】：

好吧，它会让父元素表现得像一个表格单元格。

【解决方案5】：

你可以用这个：

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

也检查一下这个http://jsfiddle.net/kYgqx/2/

【讨论】：

【解决方案6】：

#parent img{vertical-align:middle;}

【讨论】：

@Purmou 当然可以。您只需在#parent 上设置一个高度。