div中垂直居中的图像，隐藏了溢出

Question

I think this is a classic one. 我认为这是经典之作。 I found a lot of similar questions but no answer. 我发现了很多类似的问题，但没有答案。

I want to vertical center any image of any not-known height into a div with overflow:hidden 我想将任何未知高度的任何图像垂直居中到div中，并带有overflow:hidden

This is what I have right now: 这就是我现在所拥有的：

.outer {
    padding-top:49px;
    height:49px;
    width:280px;
    overflow:hidden;
    background-color:yellow;
}
.outer .inner {
    float:left;
    position:relative;
    display:block;
    background-color:blue;
}
.outer .inner img {
    position:relative;
    top:-50%;
    width:280px;
    height:auto;
    border:0px; 
    display:block; 
}

So the .inner is pushed to the center of the .outer by padding-top , so I get a "window" of 2 x 49px = 98px height. 所以.inner被推到中心.outer通过padding-top ，所以我得到一个2×49px = 98px高度的“窗口”。 Then the img I thought would be pushed out 50% from the .inner height but for some reason i get a different number… 然后我认为img从.inner高度被推出50％，但由于某种原因，我得到了一个不同的数字…

Does anybody know what I am doing wrong? 有人知道我在做什么错吗？

Thank you in advance! 先感谢您！

Answer 1

I faced a similar situation and solved it with a different approach. 我遇到了类似的情况，并用不同的方法解决了。 For that I used the image as a background image of a div. 为此，我将图像用作div的背景图像。 Code sample 代码样例

<head>
    <style>
        div.imgbox1{
            width: 160px;
            height: 110px;
            overflow: hidden;
            background-position: 50% 50%; /* for vertical and horizontal center alignment*/
        }
    </style>
</head>

<body>
    <div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" >
    </div>
</body>

If using img tag isn't a must you can try this 如果不是必须使用img标签，可以尝试一下

Answer 2

First things first... An explanation of why you are getting the result you are getting. 首先是第一件事...为什么要得到结果的解释。 This is quite simple. 这很简单。 Setting position: relative; 设定position: relative; (or absolute for that matter), and then setting top: 50%; （或绝对值），然后设置top: 50%; aligns the very top of your image to 50%. 将图片的最上方对齐50％。 If you make the height of your image 1px, you can see that the 1px is centered. 如果将图片的高度设置为1像素，则可以看到1像素居中。 Unfortunately there is no way with CSS to tell it to align to the center of the image rather than the top edge. 不幸的是，CSS无法告诉它对齐图像的中心而不是顶部边缘。

Now... A possible solution... 现在...一个可能的解决方案...

Assuming that nothing else is going inside this .inner div, have you considered allowing the image to determine the inner div's height via a margin? 假设此.inner div内部没有其他内容，您是否考虑过允许图像通过边距确定内部div的高度？

Take for example this JSFiddle . 以这个JSFiddle为例。

You can "center" the image inside the .inner div, by setting margin left and right to auto, and margin top and bottom to some px value... In my example 60px. 通过将左右边距设置为自动，将上边距和下边距设置为某个px值，可以在.inner div内将图像“居中”。在我的示例中为60px。

If you want to obtain a total div height of 600px, and your image is always 400px tall, then a margin top and bottom of 100px makes a total height of 600px. 如果要获得600像素的总div高度，并且图像始终高400像素，则顶部和底部的边距为100像素，则总高度为600像素。 (400+100+100=600). （400 + 100 + 100 = 600）。

HTML: HTML：

<div class="outer">
    <div class="inner">
        <img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg">
    </div>
</div>

CSS: CSS：

.outer {
    height:520px;
    width:520px;
    overflow:hidden;
    background-color:yellow;
    border: 2px solid purple;
}
.outer .inner {
    width: 340px;
    display:block;
    background-color:blue;
    border: 1px solid red;
    padding: 10px;
    margin: 0 auto;
}
.outer .inner img {
    width:280px;
    height:auto;
    margin: 60px auto;
    border:0px; 
    display:block;
    border: 1px solid orange;
}

A second possible solution... 第二种可能的解决方案...

Assuming that the <img> tag does not HAVE to remain an <img> tag, then a very simple way to do this is to move the image itself to CSS, as a background-image . 假设<img>标签不必保留<img>标签，那么一种简单的方法是将图像本身作为background-image移到CSS上。

See this JSFiddle for a demonstration of this solution. 有关此解决方案的演示，请参见此JSFiddle 。

HTML: HTML：

<div class="inner">
</div>

CSS: CSS：

.inner {
    width: 540px;
    height: 340px;
    display:block;
    background-color:blue;
    border: 1px solid red;
    margin: 0 auto;
    background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%;
}

div中垂直居中的图像，隐藏了溢出

问题描述

2 个解决方案

解决方案1
1 2013-03-27 14:17:26

解决方案2
0 2013-03-27 15:03:16

div中垂直居中的图像，隐藏了溢出

问题描述

2 个解决方案

解决方案1 1 2013-03-27 14:17:26

解决方案2 0 2013-03-27 15:03:16

解决方案1
1 2013-03-27 14:17:26

解决方案2
0 2013-03-27 15:03:16