我的客户需要屏幕中间的网页。为此，我在名为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;
}
See this fiddle。希望有帮助。
代替使用top，使用margin-top并将位置保持为relative
检查JS小提琴
Top具有不同的行为
“ top”用于通过使用“ position”属性来调整元素。 margin-top用于测量到元素的相对于上一个元素的外部距离。此外，最高职位可能会根据职位的类型（绝对，相对或固定）而有所不同。
您正在说#mainpage为其父对象（body）的高度的70％。但是body随其内容而扩展。
要解决您的问题，应将body和html的高度设置为：
html, body {
height: 100%
}
也检查此Fiddle。