Html 固定div的CSS水平居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3157372/
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
CSS horizontal centering of a fixed div?
提问by matt
#menu {
position: fixed;
width: 800px;
background: rgb(255, 255, 255); /* The Fallback */
background: rgba(255, 255, 255, 0.8);
margin-top: 30px;
}
I know this question is a million times out there, however I can't find a solution to my case. I've got a div, which should be fixed on the screen, even if the page is scrolled it should always stay CENTERED in the middle of the screen!
我知道这个问题已经有一百万次了，但是我找不到解决我的问题的方法。我有一个 div，它应该固定在屏幕上，即使页面滚动它也应该始终保持在屏幕中间的中心位置！
The div should have 500pxwidth, should be 30pxaway from the top (margin-top), should be horizontally centered in the middle of the page for all browser sizes and should not move when scrolling the rest of the page.
div 应该有500px宽度，应该30px远离顶部（margin-top），应该在所有浏览器尺寸的页面中间水平居中，并且在滚动页面的其余部分时不应移动。
Is that possible?
那可能吗？
采纳答案by Quentin
left: 50%;
margin-left: -400px; /* Half of the width */
回答by Maciej Krawczyk
The answers here are outdated.Now you can easily use a CSS3 transform without hardcoding a margin. This works on all elements, including elements with no width or dynamic width.
这里的答案已经过时。现在，您可以轻松地使用 CSS3 转换，而无需对边距进行硬编码。这适用于所有元素，包括没有宽度或动态宽度的元素。
Horizontal center:
水平中心：
left: 50%;
transform: translateX(-50%);
Vertical center:
垂直中心：
top: 50%;
transform: translateY(-50%);
Both horizontal and vertical:
水平和垂直：
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Compatibility is not an issue: http://caniuse.com/#feat=transforms2d
兼容性不是问题：http: //caniuse.com/#feat=transforms2d
回答by salomvary
If using inline-blocks is an option I would recommend this approach:
如果使用内联块是一种选择，我会推荐这种方法：
.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;
}
I wrote a short post on this here: http://salomvary.github.com/position-fixed-horizontally-centered.html
我在这里写了一篇简短的文章：http: //salomvary.github.com/position-fixed-horizontally-central.html
回答by Nick Rice
Edit September 2016: Although it's nice to still get an occasional up-vote for this, because the world has moved on, I'd now go with the answer that uses transform (and which has a ton of upvotes). I wouldn't do it this way any more.
编辑 2016 年 9 月：尽管偶尔为此获得赞成票还是不错的，因为世界已经在发展，我现在选择使用转换的答案（并且有大量赞成票）。我不会再这样做了。
Another way not to have to calculate a margin or need a sub-container:
另一种不必计算保证金或不需要子容器的方法：
#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) */
}
回答by Anonymous
Here's another two-div solution. Tried to keep it concise and not hardcoded. First, the expectable html:
这是另一个两格解决方案。试图保持简洁而不是硬编码。首先，预期的html：
<div id="outer">
<div id="inner">
content
</div>
</div>
The principle behind the following css is to position some side of "outer", then use the fact that it assumes the size of "inner" to relatively shift the latter.
以下css背后的原理是定位“外”的某侧，然后利用它假定“内”的大小来相对移动后者。
#outer {
position: fixed;
left: 50%; // % of window
}
#inner {
position: relative;
left: -50%; // % of outer (which auto-matches inner width)
}
This approach is similar to Quentin's, but inner can be of variable size.
这种方法类似于 Quentin 的方法，但内部可以是可变大小的。
回答by Denis V
It is possible to horisontally center the div this way:
可以通过这种方式将 div 水平居中：
html:
html：
<div class="container">
<div class="inner">content</div>
</div>
css:
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;
}
Using this way you will have always your inner block centered, in addition it can be easily turned to true responsive (in the example it will be just fluid on smaller screens), therefore no limitation in as in the question example and in the chosen answer.
使用这种方式，您将始终将内部块居中，此外，它可以轻松转换为真正的响应式（在示例中，它在较小的屏幕上只是流畅的），因此在问题示例和所选答案中没有限制.
回答by Meduza
... or you can wrap you menu div in another:
...或者您可以将菜单 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;
}
回答by Vien Tang
Here's a flexbox solution when using a full screen wrapper div. justify-content centers it's child div horizontally and align-items centers it vertically.
这是使用全屏包装 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
}
