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;

}

See this fiddle。希望这有帮助。

Answer 2

不使用top，而是使用margin-top并将排名保持为relative

http://jsfiddle.net/xvdnm/

检查JS小提琴

Top有不同的行为

“top”用于使用“position”属性调整元素。 margin-top用于测量与元素相关的外部距离。此外，最高行为可能因位置类型而异，绝对，相对或固定。

来自： CSS: Top vs Margin-top

Answer 3

你在说'{1}}为其父级（#mainpage）高度的70％。但是body会延伸其内容。

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

html

同时检查此Fiddle。

CSS定位相对不显示上边距

3 个答案: