CSS水平居中的一个固定的div？
#menu { position: fixed; width: 800px; background: rgb(255, 255, 255); /* The Fallback */ background: rgba(255, 255, 255, 0.8); margin-top: 30px; } 我知道这个问题有一百万次，但是我找不到解决scheme。 我有一个div，应该固定在屏幕上，即使页面滚动，它应该始终保持居中在屏幕中间！
div应该具有500px宽度，应该距离顶部（margin-top） 30px ，对于所有的浏览器大小应该在页面中间水平居中，并且在滚动页面的其余部分时不应该移动。
那可能吗？
left: 50%; margin-left: -400px; /* Half of the width */
这里的答案已经过时了。 现在，您可以轻松使用CSS3转换， 而不用硬编码边距 。 这适用于所有元素，包括没有宽度或dynamic宽度的元素。
水平中心：
left: 50%; transform: translateX(-50%);
垂直中心：
top: 50%; transform: translateY(-50%);
水平和垂直：
left: 50%; top: 50%; transform: translate(-50%, -50%);
兼容性不是问题： http : //caniuse.com/#feat=transforms2d
如果使用内联块是一个选项，我会推荐这种方法：
.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
编辑2016年9月：虽然仍然偶尔得到这个赞成票很好，因为世界已经开始了，现在我要回答使用变换（并且有大量upvotes）。 我不会再这样做了。
另一种不必计算保证金或需要子容器的方法是：
#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) */ }
…或者你可以把你的菜单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; }
以这种方式水平地居中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; }
使用这种方式，你将始终保持你的内在中心，此外，它可以很容易地变成真正的响应（在这个例子中，它将只是在更小的屏幕上stream动），因此没有限制，如在问题的例子和select的答案。
这是另外两个解决scheme。 试图保持简洁而不是硬编码。 首先，可以预期的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) }
这种方法类似于昆汀，但内在可以是可变的大小。
