固定div的CSS水平居中？

Question

#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),对于所有浏览器大小,应该在页面中间水平居中,并且在滚动页面的其余部分时不应该移动.

那可能吗？

Answer 1

这里的答案已经过时了.现在,您可以轻松使用CSS3转换而无需编写边距.这适用于所有元素,包括没有宽度或动态宽度的元素.

水平中心:

left: 50%;
transform: translateX(-50%);

垂直中心:

top: 50%;
transform: translateY(-50%);

水平和垂直:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

兼容性不是问题:http://caniuse.com/#feat=transforms2d

Answer 2

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

Answer 3

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

.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-horizo​​ntally-centered.html

Answer 4

编辑2016年9月:虽然很高兴仍然偶尔获得投票,因为世界已经转移,我现在选择使用转换的答案(并且有大量的赞成票).我不会这样做了.

另一种不必计算保证金或需要子容器的方法:

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}

Answer 5

...或者你可以将菜单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;
    }

Answer 6

有可能以这种方式对div进行水平居中:

HTML:

<div class="container">
    <div class="inner">content</div>
</div>

CSS:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

使用这种方式,您将始终将内部块置于中心位置,此外,它可以很容易地转换为真实的响应(在示例中,它将在较小的屏幕上流动),因此不会像问题示例和所选答案中那样受到限制.

Answer 7

这是另一个双重解决方案.试图保持简洁而不是硬编码.首先,可预期的html:

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

下面css背后的原理是定位"外部"的某一侧,然后使用它假设"内部"的大小来相对移动后者的事实.

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

这种方法与Quentin类似,但内部可以是可变大小的.