#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），对于所有浏览器尺寸，应该水平居中在页面中间，并且在滚动其余部分时不应移动页面。
这可能吗？
【问题讨论】：
left: 50%;
margin-left: -400px; /* Half of the width */
【讨论】：
-400 是由于 div 的宽度设置为 800。
...或者您可以将菜单 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;
}
【讨论】：
如果使用内联块是一种选择，我会推荐这种方法：
.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
【讨论】：
width 或其他东西硬编码任何数字——不像@Quentins 回答
可以通过这种方式将 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;
}
使用这种方式，您将始终使您的内部块居中，此外，它可以轻松转换为真正的响应式（在示例中，它只会在较小的屏幕上流畅），因此在问题示例和选择的答案。
【讨论】：
编辑 2016 年 9 月：虽然偶尔能得到一个赞成票还是不错的，因为世界已经在发展，我现在会选择使用 transform 的答案（并且有很多赞成票)。我不会再这样了。
另一种不必计算保证金或需要子容器的方法：
#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) */
}
【讨论】：
bottom:0 将确保菜单始终垂直居中，但我现在看到这不是 OP 所要求的。 :)
这是另一个二格解决方案。试图保持简洁而不是硬编码。一、预期的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)
}
这种方法类似于 Quentin 的方法，但内部可以是可变大小的。
【讨论】：
这里的答案已经过时了。现在您可以轻松地使用 CSS3 转换无需硬编码边距。这适用于所有元素，包括没有宽度或动态宽度的元素。
水平中心：
left: 50%;
transform: translateX(-50%);
垂直中心：
top: 50%;
transform: translateY(-50%);
水平和垂直：
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
【讨论】：
这是使用全屏包装 div 时的 flexbox 解决方案。 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
}
【讨论】：