Question

我有一些问题，我今天一直在努力解决这个问题。

我有一个930像素高的图像，我想要在屏幕的正中间居中。我使用了推荐的CSS代码段。

position: absolute;
top: 50%;
left: 50%;
width: 1280px;
height: 930px;
margin-top: -465px;
margin-left: -640px;

但不幸的是，如果视口小于930px，它将开始裁剪区域的顶部。我尝试了一些方法，但似乎没有任何帮助。

此外，在Chrome中，我设法得到它，因此一些大小但移动的div不需要滚动，但是在Firefox和IE中，它们似乎仍占用了移动前的空间（使用左：和顶部：）

任何帮助都将不胜感激，谢谢。

Answer 1

我有一个丑陋的解决方案，但它的工作除了IE＆lt; 8：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<body>
    <div id="positioner"></div><!--
    --><img src="yourimage" alt="" id="image" />
</body>
</html>

和CSS：

html,body,#positioner {
    margin:0;
    padding:0;
    height:100%;
}
body {
    text-align:center;
}
#positioner {
    display:inline-block;
    vertical-align:middle;
}
#image {
    max-height:100%;
    max-height:100%;
    vertical-align:middle;
}

垂直居中和div占用空间的问题

1 个答案: