CSS定位-垂直居中，在较小窗口中丢失图像顶部

Question

我正在使用这个CSS来垂直居中一个精灵：

#content {
    width:750px;
    height:950px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-475px 0 0 -375px;
}

...when浏览器窗口的高度小于950px时，我丢失了图像的顶部。当浏览器高度大于950px时，我如何将图像设置为垂直居中，但当高度小于950px时，图像的顶部保持不变，而我只丢失底部？

我已经在我的源代码中使用链接来根据屏幕大小在css样式表之间切换，如下所示：

<link rel="stylesheet" media="screen and (min-width:481px) and (max-width:800px)"
href="tablet.css" />

但据我所知，你不能根据浏览器的高度来切换样式表。

Answer 1

将图像垂直居中(在本例中也是水平居中)的最简单方法可能是这种方法：

只要屏幕比图像大，

• 就会将图像居中。只要图像比screen

小，

• 就会将其放在顶部

希望这是你所期望的行为

演示

http://jsfiddle.net/uB3pW/

HTML

<div class="wrapper">
    <img class="sprite" src="http://lorempixel.com/output/nightlife-q-c-750-500-4.jpg" alt="">
</div>

CSS

* {
    margin:     0;
    padding:    0;
}

body, html {
    display:    table;
    width:      100%;
    height:     100%;
}

div.wrapper {
    display:    table-cell;
    position:   relative;
    top:        0px;
    left:       0px;
    width:      100%;
    height:     100%;
    background: #ccc;
    text-align: center;
    vertical-align: middle;
}

便笺

在IE7中不起作用。