CSS水平居中的固定div？
CSS水平居中的固定div？
提问于 2010-07-01 19:41:32
#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 - top )，应该水平居中于所有浏览器大小的页面中间，并且在滚动页面的其余部分时不应该移动。
这有可能吗？
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-07-01 19:45:04
left: 50%;
margin-left: -400px; /* Half of the width */Stack Overflow用户
发布于 2012-04-27 22:28:53
如果使用内联块是一种选择，我建议使用这种方法：
.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
Stack Overflow用户
发布于 2013-11-27 09:44:51
可以这样使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;
}使用这种方式，你将始终将你的内部块居中，此外，它可以很容易地转换为真正的响应式(在示例中，它将在较小的屏幕上是流动的)，因此在问题示例和选择的答案中没有限制。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3157372
复制相关文章
相似问题
腾讯云开发者
