CSS水平居中固定div?


183
#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远离顶部(边缘顶部),应该在页面中间水平居中,并且在滚动其余页面时不应移动。

那可能吗?


Answers:


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

25
调整浏览器窗口大小时,它无法按预期工作。

3
@Bahodir:确定吗?调整大小对我来说似乎不错。我认为这 -400是由于div的宽度设置为引起的800
Merlyn Morgan-Graham

1
@PrestonBadeer —就像这个问题在问的那样吗?
昆汀

3
完全同意-这不是解决方案!切勿以这种方式对某些东西进行硬编码。-1
Nate I

3
我之所以投票否决,并不是因为这是一个糟糕的答案,而是一个好答案,而是因为它不再是,并且第二高的答案需要所有的帮助,它可以被视为最佳答案。现在。昆汀:我认为在答案本身中添加对此效果的评论进行编辑是一个好主意-然后,我将投反对票。
尼克·赖斯

548

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

水平中心:

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

垂直中心:

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

水平和垂直:

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

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


86
+1该答案说明了stackoverflow的问题:过去效果很好并且被正确接受的旧答案可以自豪地排在首位,给人以他们仍然合适的印象,而对于像这样的新世界来说,好的答案必须与赔率抗争。
尼克·赖斯

10
@NickRice 100%同意。该答案应该是新接受的答案。初级开发人员甚至都不会看到当前接受的答案!
Nate I

2
@matt请改用这个。滚动到很长才能看到此内容。
ssbb

4
这会在内容元素的框阴影中产生模糊效果。
2016年

4
是的,Chrome浏览器错误地模糊了转换后的内容。文本也模糊。但这是使固定元素居中而不进行硬编码和使用包装器元素的唯一解决方案。如果您不关心背景的指针事件,则可以使用全屏包装器和flexbox或下面的@salomvary解决方案来达到相同的效果。
Maciej Krawczyk

58

如果可以使用内联块,则建议使用以下方法:

.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-horizo​​ntally-centered.html


1
10倍,这对我很有用,而不必为任何数字硬编码任何数字width-与@Quentins答案不同
Yatharth Agarwal

30

编辑2016年9月:尽管仍然可以偶尔对此进行投票是很不错的,但是由于世界已经发生了变化,我现在将使用使用transform的答案(并且有大量的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) */
}

@Joey bottom:0的作用是什么?即为什么需要它?(自从我看了已有一段时间!)
Nick Rice

bottom:0可以确保菜单始终垂直居中,但是我现在看到的不是OP所要求的。:)
约旦H

我尝试在不同的上下文中使用这个BYT想通了,它没有中心FF如果要素高度比窗口(视)高度更高
菲利普Werminghausen

因为世界在不断发展,所以我现在谈谈使用转换的答案。(我之前发表了此评论,引用了答录人使用的名称-但他们更改了该名称,所以我的评论不再有意义,因此我删除了它-而是在此页面上搜索transform。)
Nick Rice

7

可以通过以下方式将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;
}

使用这种方法,您将始终使内部块居中,此外,可以轻松地将其变为真响应(在示例中,它在较小的屏幕上只是流畅的),因此不受问题示例和所选答案的限制。 。


5

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

5

这是另一个两格解决方案。试图保持简洁而不是硬编码。首先,预期的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)
}

这种方法类似于Quentin的方法,但是inner可以是可变大小的。


-1

这是使用全屏包装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
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.