中心对齐固定位置div

I'm trying to get a div that has position:fixed center aligned on my page.

我想要一个有位置的div:固定中心对齐在我的页面上。

I've always been able to do it with absolutely positioned divs using this "hack"

我一直都能用这个"hack"实现完全定位div

left: 50%; width: 400px; margin-left:-200px

...where the value for margin-left is half the width of the div.

…其中，空白区域的值是div宽度的一半。

This doesn't seem to work for fixed position divs, instead it just places them with their left-most corner at 50% and ignores the margin-left declaration.

这似乎对固定位置div不起作用，相反，它只是将它们的最左角设置为50%，而忽略了左侧边界声明。

Any ideas of how to fix this so I can center align fixed positioned elements?

有什么办法可以解决这个问题吗?

And I'll throw in a bonus M&M if you can tell me a better way to center align absolutely positioned elements than the way I've outlined above.

如果你能告诉我一种更好的方法来对齐绝对位置的元素而不是像我上面描述的那样。

11 个解决方案

#1

148

For the ones having this same problem, but with a responsive design, you can also use:

对于那些有同样问题但有响应设计的人，你也可以使用:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

Doing this will always keep your fixed div centered on the screen, even with a responsive design.

这样做将使您的固定div始终集中在屏幕上，即使是响应性设计。

#2

122

Koen's answer doesn't exactly centers the element.

科恩的回答并不完全集中在元素上。

The proper way is to use CCS3 transform property. Although it's not supported in some old browsers. And we don't even need to set a fixed or relative width.

正确的方法是使用CCS3转换属性。虽然在一些旧的浏览器中不支持它。我们甚至不需要设置一个固定的或相对的宽度。

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Working jsfiddle comparison here.

工作jsfiddle比较。

#3

A good way to center a "fixed" element would be to make a "center" element as fixed and with 100% width, and everything in it will be in the center of the 100% width "center".

将“固定”元素居中的一个好方法是将“center”元素设置为固定的，宽度为100%，其中的所有内容都位于100%宽度的“center”的中心。

The css would be:

css是:

#center{
    position:fixed;
    width: 100%; //this basically stretches all over the window as fixed
}

The html would be:

html是:

<html><head></head>
<body>
    <center id='center'>
        ...elements
    </center>
</body></html>

The same method can be applied to absolute positioning of elements.

同样的方法也适用于元素的绝对定位。

UPDATE: And for skeptics that think of center tag as being deprecated, it can be replaced with a wrapper div that has align="center" property applied. You could even have align removed and could use text-align:center.

更新:对于那些认为中心标记已被废弃的怀疑论者，可以用已应用align="center"属性的包装器div替换它。您甚至可以删除align，并可以使用text-align:center。

#4

From the post above, I think the best way is

从上面的帖子来看，我认为最好的方法是。

Have a fixed div with width: 100%
有一个固定的div: 100%
Inside the div, make a new static div with margin-left: auto and margin-right: auto, or for table make it align="center".
在div中，创建一个带有margin-left的新静态div: auto和margin-right: auto，或for table make it align="center"。
Tadaaaah, you have centered your fixed div now
Tadaaaah，你的固定div已经居中了

Hope this will help.

希望这将帮助。

#5

Normal divs should use margin-left: auto and margin-right: auto, but that doesn't work for fixed divs. The way around this is similar to Andrew's answer, but doesn't use the deprecated <center> thing. Basically, just give the fixed div a wrapper.

正常的divs应该使用margin-left: auto和margin-right: auto，但是这对固定的divs不起作用。解决这个问题的方法类似于Andrew的答案，但是不使用不赞成的

。基本上，只需给固定的div一个包装。

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

<div id="wrapper">
    <div id="fixed_div"></div>
</div

This will center a fixed div within a div while allowing the div to react with the browser. i.e. The div will be centered if there's enough space, but will collide with the edge of the browser if there isn't; similar to how a regular centered div reacts.

这将在div中居中放置一个固定的div，同时允许div与浏览器进行响应。例如，如果有足够的空间，div会居中，但如果没有，则会与浏览器的边缘发生碰撞;类似于普通的居中div的反应。

#6

If you know the width is 400px this would be the easiest way to do it I guess.

如果你知道宽度是400px这是最简单的方法。

 left: calc(50% - 200px);

#7

This works if you want the element to span across the page like another navigation bar.

如果希望元素像其他导航条一样跨页，则可以使用这种方法。

width: calc (width: 100% - width whatever else is off centering it)

宽度:calc(宽度:100% -以它为中心的其他任何东西的宽度)

For example if your side navigation bar is 200px:

例如，如果你的侧导航栏是200px:

width: calc(100% - 200px);

宽度:钙(100% - 200 px);

#8

I used the following with Twitter Bootstrap (v3)

我使用Twitter Bootstrap (v3)

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

I.e make a full width element that is fixed position, and just shove a container in it, the container is centered relative to the full width. Should behave ok responsively too.

我。e做一个固定位置的全宽元素，将一个容器放入其中，容器相对于全宽居中。也应该反应良好。

#9

It is quite easy using width: 70%; left:15%;

使用宽度很容易:70%;左:15%;

Sets the element width to 70% of the window and leaves 15% on both sides

将元素宽度设置为窗口的70%，并在两边留出15%。

#10

-1

If you want to center aligning a fixed position div both vertically and horizontally use this

如果你想将一个固定位置的div在垂直和水平方向上居中，请使用这个

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

#11

-1

A solution using flex box; fully responsive:

使用flex box的解决方案;充分响应:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

#1

148