#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

我知道这个问题有一百万次了,但是我找不到答案。 我有一个div,它应该是固定在屏幕上,即使页面是滚动的,它应该始终保持在屏幕中间的中心!

div的宽度应该是500px,距离顶部应该是30px (margin-top),对于所有浏览器大小,应该水平居中在页面中间,当滚动页面的其余部分时不应该移动。

这可能吗?


当前回答

这是另一个双div的解决方案。尽量保持简洁,而不是硬编码。首先,期望的html:

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

下面的css背后的原则是定位“outer”的某一侧,然后使用它假设“inner”的大小来相对移动后者。

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

这种方法与昆汀的方法类似,但内部可以有不同的大小。

其他回答

这是另一个双div的解决方案。尽量保持简洁,而不是硬编码。首先,期望的html:

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

下面的css背后的原则是定位“outer”的某一侧,然后使用它假设“inner”的大小来相对移动后者。

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

这种方法与昆汀的方法类似,但内部可以有不同的大小。

left: 50%;
margin-left: -400px; /* Half of the width */

... 或者你可以把你的菜单div包装在另一个:

    <div id="wrapper">
       <div id="menu">
       </div>
    </div>


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

下面是一个flexbox的解决方案,当使用全屏包装div时。justify-content居中,它的子div水平和align-items垂直居中。

<div class="full-screen-wrapper">
    <div class="center"> //... content</div>
</div>

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}

如果使用内联块是一个选项,我会推荐这种方法:

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
} 

我在这里写了一篇简短的文章:http://salomvary.github.com/position-fixed-horizontally-centered.html