jquery - 位于 div 中心的图像未知高度宽度

Question

我想使用 CSS Trick 使图像居中.但是如果图像大小是随机的(不固定的)怎么办。令人惊讶的是，我不想保持图像响应，我想在不改变其宽度或高度(实际像素)的情况下将图像置于中心。

下面是我的代码:

HTML:

<div class="slider"><img class="center" src="images/mySlide.jpg" /></div>

CSS:

.slider{
       width: 100%;
       position: relative;
}
.center {
       width: 300px;
       height: 300px;
       position: absolute;
       left: 50%;
       top: 50%; 
       margin-left: -150px;
       margin-top: -150px;
}

Answer 1

你可以像这样居中任何图像:

http://jsfiddle.net/NicoO/y5vh3/2/

.slider {
    width: 100%;
    position: relative;
    text-align: center;
    height: 400px;
}
.slider:before
{
    height: inherit;
    display: inline-block;
    vertical-align: middle;
    content:"";
}

.center {
    display: inline-block;
    margin: auto;
    vertical-align: middle;
}

使用这样的 HTML:

<div class="slider">
    <img class="center" src="http://www.placehold.it/100x40" />
</div>