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

Posted 2023-03-05

【中文标题】在不知道尺寸的情况下垂直居中图像

【英文标题】：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>

【参考方案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 imgvertical-align:middle;

【讨论】：

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