Html 居中对齐固定位置 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2861247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
center aligning a fixed position div
提问by Kyle
I'm trying to get a div that has position:fixedcenter aligned on my page.
我正在尝试获得一个position:fixed在我的页面上居中对齐的 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.
...其中 margin-left 的值是 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% 处，并忽略了 margin-left 声明。
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.
如果您能告诉我一种比我上面概述的方法更好的居中对齐绝对定位元素的方法，我将提供额外的 M&M。
回答by emzero
Koen's answer doesn't exactly centers the element.
Koen 的回答并没有完全以元素为中心。
The proper way is to use CCS3 transformproperty. Although it's not supported in some old browsers. And we don't even need to set a fixed or relative width.
正确的方法是使用CCS3 transform财产。尽管某些旧浏览器不支持它。我们甚至不需要设置一个 fixed 或 relative width。
.centered {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
}
Working jsfiddle comparison here.
在这里工作 jsfiddle 比较。
回答by Koen
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 divcentered on the screen, even with a responsive design.
div即使使用响应式设计，这样做也将始终使您的固定点在屏幕上居中。
回答by andreihondrari
You could use flexbox for this as well.
您也可以为此使用 flexbox。
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* this is what centers your element in the fixed wrapper*/
display: flex;
flex-flow: column nowrap;
justify-content: center; /* aligns on vertical for column */
align-items: center; /* aligns on horizontal for column */
/* just for styling to see the limits */
border: 2px dashed red;
box-sizing: border-box;
}
.element {
width: 200px;
height: 80px;
/* Just for styling */
background-color: lightyellow;
border: 2px dashed purple;
}<div class="wrapper"> <!-- Fixed element that spans the viewport -->
<div class="element">Your element</div> <!-- your actual centered element -->
</div>回答by Bhimbim
From the post above, I think the best way is
从上面的帖子，我认为最好的方法是
- Have a fixed div with
width: 100% - Inside the div, make a new static div with
margin-left: autoandmargin-right: auto, or for table make italign="center". - Tadaaaah, you have centered your fixed div now
- 有一个固定的div
width: 100% - 在 div 中，使用
margin-left: autoandmargin-right: auto或 table make it创建一个新的静态 divalign="center"。 - Tadaaaah，您现在已将固定 div 居中
Hope this will help.
希望这会有所帮助。
回答by Kevin
Normal divs should use margin-left: autoand 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.
普通 div 应该使用margin-left: autoand margin-right: auto，但这不适用于固定 div。解决这个问题的方法类似于安德鲁的回答，但不使用已弃用的<center>东西。基本上，只需给固定 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>
</divThis 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 的反应。
回答by Daut
If you know the width is 400px this would be the easiest way to do it I guess.
如果你知道宽度是 400px，我猜这将是最简单的方法。
left: calc(50% - 200px);
回答by LAXIT KUMAR
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%);
回答by JCBrown
<div class="container-div">
<div class="center-div">
</div>
</div>
.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}
This should do the same.
这应该做同样的事情。
回答by Robert Ross
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)
width: calc (width: 100% - width 任何其他偏离它的中心)
For example if your side navigation bar is 200px:
例如，如果您的侧边导航栏是 200 像素：
width: calc(100% - 200px);
宽度：计算（100% - 200px）；
回答by Barry Carlyon
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.
即制作一个固定位置的全宽元素，然后将一个容器推入其中，容器相对于全宽居中。也应该表现得很好。
