Question

我需要能够将图像垂直居中以适应所有常见分辨率。这里有很多关于SO的人已经问过这个问题了，90％的人都给了这个教程 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

作为答案。但是，当我在FF中观看我的1280 x 1024 res监视器时，它不会居中。更糟糕的是，它在IE7中可怕地破坏了。所以，这绝对不是答案。

我在追逐不可能实现的梦想吗？该解决方案必须适用于FF和IE 6/7

解决方案可以是任何可行的，虽然有点纯粹主义者，但我更喜欢div over table：）

特别是我需要它为这个网站 http://www.codecookery.com/test/index.html

如你所见，它是一个幻灯片，需要居中。

Answer 1

我相信这个解决方案正是您所需要的。我无权访问IE来测试它（这是我使用Linux获得的），但我相信它有效。关于表格上的div，如何根本没有包装？不仅如此，如果图像大于显示器的分辨率，它会很好地缩小。如果您想沿边缘填充一点（对于极大的图像和/或小分辨率），您可以调整最大高度和最大宽度。

CSS：

<style>

/* Positioning */
.absoluteCenter {
 margin:auto; /* Required */
 position:absolute; /* Required */
 top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
 left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only  */
}

/* Sizing */
.absoluteCenter { /* Fallback */
 max-height:100%;
 max-width:100%;
}

</style>

HTML：

<img class="absoluteCenter" src="PATHTOIMAGE">

注意：

图片将保持宽高比

Answer 2

如果固定高度div是一个选项，那么您可以使用绝对位置前50％，然后使用负边距来定位div。我在FF3.6，IE6，IE8和Chrome中测试了以下内容。

<html>
<head>
  <style>
    #vertCenter {
        height: 400px; 
        position: absolute; 
        top: 50%; 
        margin-top: -200px;
        border: 1px green solid;
    }
  </style>
</head>

<body>
  <div id="vertCenter">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
  </div>
</body>
</html>

Answer 3

code here不如jakpsatweb.cz那么可怕。

在所有分辨率中垂直居中图像

3 个答案: