CSS相对位置未显示上边距

Question

我的客户需要屏幕中间的网页。 为此，我在名为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">

Answer 1

这是我使用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;

}

看到这个小提琴 。 希望对您有所帮助。

Answer 2

代替使用top ，使用margin-top并将位置保持为relative

http://jsfiddle.net/xvdnm/

检查JS小提琴

Top有不同的行为

“ top”用于通过使用“ position”属性来调整元素。 margin-top用于测量到元素的相对于上一个元素的外部距离。 同样，最高职位可能会有所不同，具体取决于职位类型，绝对职位，相对职位或固定职位。

来自： CSS：顶部与保证金顶部

Answer 3

您要说#mainpage是其父代（ body ）高度的70％。 但是， body随其内容而伸展。

要解决您的问题，您应该为body和html设置高度：

html, body {
     height: 100%
}

还要检查这个小提琴 。