0

我的客户需要屏幕中间的网页。为此，我在一个名为 的 div 中声明了整个网页mainpage。CSS：

#mainpage
{

    position:relative;
    width:850px;
    margin:0 auto;
    height:70%;
    top:15%;
    background:#F1F1F1;

}

但是上面的css不会垂直显示在屏幕中间。如果我给absoluteor 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">
4

3 回答 3

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;

}

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

于 2013-09-02T09:03:34.090 回答
0

您“说”要#mainpage成为其父级（body）高度的 70%。然而body，它的内容延伸。

要解决您的问题，您应该为bodyand设置一个高度html：

html, body {
     height: 100%
}

还要检查这个Fiddle。

于 2013-09-02T09:09:01.160 回答
0

而不是使用top，使用margin-top并保持位置为relative

http://jsfiddle.net/xvdnm/

检查 JS 小提琴

Top有不同的行为

“top”用于使用“position”属性调整元素。margin-top 用于测量与前一个元素的外部距离。此外，顶部行为可能会因位置的类型（绝对、相对或固定）而有所不同。

来自： CSS：顶部与边距顶部

于 2013-09-02T08:49:30.397 回答