固定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），对于所有浏览器尺寸，应该在页面中间水平居中并且不应该移动滚动页面的其余部分时。

那可能吗？

原文由 matt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Quentin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这里的答案已经过时了。 现在您可以轻松地使用 CSS3 转换 _而无需对边距进行硬编码_。这适用于所有元素，包括没有宽度或动态宽度的元素。

水平中心：

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

垂直中心：

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

横向和纵向：

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

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

原文由 Maciej Krawczyk 发布，翻译遵循 CC BY-SA 3.0 许可协议