我的客户端需要屏幕中间的网页。为此，我在一个名为mainpage的div中声明了整个网页。CSS：
#mainpage
{
position:relative;
width:850px;
margin:0 auto;
height:70%;
top:15%;
background:#F1F1F1;
}
但是上面的css并没有垂直显示在屏幕的中间。如果我给absolute或fixed，它垂直地在屏幕的中间，但水平地它是右对齐的！我怎样才能得到想要的结果？
编辑：我的HTML代码
<body>
<div id="mainpage_wrapper">
<div id="mainpage">
<div id="header_wrapper">
<div id="header">
<?php require_once('menu.php'); ?>
<?php echo $logo; ?>
<?php echo $menu; ?>
</div>
</div>
<div id="main-container">
<!-- List of logos -->
<div id="logolist">
这里是我使用的fixed定位。
#mainpage
{
position:fixed;
width:840px;
height:300px;
top:50%;
left: 50%;
margin: -150px 0 0 -420px; /* [-(height/2)px 0 0 -(width/2)px] */
background-color:#F1F1F1;
}
看看这把小提琴。希望得到帮助。
不要使用top，而是使用margin-top并将位置保持为relative
http://jsfiddle.net/xvdnm/
检查JS Fiddle
Top具有不同的行为
"top"用于使用"position"属性调整元素。margin-top用于测量相对于前一个元素到元素的外部距离。此外，顶部行为可能因位置的类型而不同，绝对、相对或固定。
来源：CSS：顶部与边距顶部
您正在对#mainpage"说"其高度为其父对象（body）的70%。然而，body随着其内容而延伸。
要解决您的问题，您应该将高度设置为body和html:
html, body {
height: 100%
}
同时检查Fiddle。