CSS 固定div 水平居中？

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

，对于所有浏览器尺寸均应在页面中间水平居中，并且在滚动页面的其余部分时不应移动.

这可能吗？

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-horizontally-centered.html

Answer 4

编辑 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) */
}

Answer 5

可以通过这种方式将 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 6

这是另一个两格解决方案。尽量保持简洁而不是硬编码。首先是预期的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 的方法，但内部可以是可变大小的。

Answer 7

...或者您可以将菜单 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 8

最好的方法是使用固定的 div，然后在其中放置一个居中的 div。当您想要一个固定容器时，这非常有用，这样固定元素就不会超出容器宽度。

<div class="fixed">
  <div class="container">
   <div class="toast">A notification that shows up</div>
  </div>
</div>

.fixed {
 position: fixed;
 top: 32px;
 left: 0;
 right: 0;
 pointer-events: none; // so this div does block clicks on content underneath it
}

.container {
 max-width: 1200px;
 width: 100%;
 margin: 0 auto;
}

.toast {
 pointer-events: all; // so you can click on the toast to close it
}

Answer 9

这是使用全屏包装 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
}

Answer 10

div {
   left: calc((100vw - 100%) / 2);
}