Html 如何使div中心水平固定位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16058823/
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
how to make div center horizontally with fixed position?
提问by hiway
I want div to be center horizontally, css code is this:
我希望 div 水平居中，css 代码是这样的：
<style type="text/css">
#footer{
position: fixed;
bottom: 20px;
background-color: red;
width:500px;
margin: auto;/*left:auto; right:auto;*/
}
</style>
and html code:
和html代码：
<body>
<div id="footer">hello world</div>
</body>
I think there is no need to explain my css code, it is almost self-explanatory, but the div is not center horizontally, is there any way to make this? Thanks in advance.
我认为没有必要解释我的 css 代码，它几乎是不言自明的，但是 div 不是水平居中，有什么办法可以做到这一点？提前致谢。
回答by Sachin
Try this
尝试这个
#footer{
position: fixed;
bottom: 20px;
background-color: red;
width:80%;
margin: 0 0 0 -40%;
left:50%;
}
The point to be noted here is, the negative margin-leftof exactly half value of widthand set the left50 % of the body
这里要注意的一点是，margin-left正半值的负数width和设置left身体的50%
回答by Nick N.
This should work well for you. It works by adding a container div.
这应该对你有用。它通过添加一个容器 div 来工作。
<style>
#footer-container{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
#footer
{
width:500px;
margin:0 auto;
margin-bottom:20px;
background-color:red;
}
</style>
<div id="footer-container">
<div id="footer">hello world</div>
</div>
回答by Greg Benner
Put another div inside it with relative position, margin: auto. Give the fixed one 100% width.
将另一个具有相对位置的 div 放入其中，边距：自动。给固定的一个 100% 宽度。
Otherwise you can hack it with negative margin 'trick'
否则，您可以使用负边距“技巧”来破解它
div {
position: fixed;
left: 50%;
width: 500px;
margin-left: -250px;
}
回答by xd1le
If you're working with modern browsers you can use the flexbox layout module: http://caniuse.com/#feat=flexbox.
如果您使用的是现代浏览器，则可以使用 flexbox 布局模块：http://caniuse.com/#feat=flexbox 。
Flexbox documentation: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Note: Can't post more than two links due to my rep.
Flexbox 文档：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
注意：由于我的代表，不能发布两个以上的链接。
(Using a footertag instead of a div#footeras it's simpler.)
（使用footer标签而不是 a ，div#footer因为它更简单。）
<div id="footer-container">
<footer>hello world</footer>
<div>
#footer-container {
bottom: 20px;
position: fixed;
display: flex;
justify-content: center;
width: 100%;
}
footer {
width: 500px;
background-color: red;
}
justify-content: center;'centers' #footer-container's children, which is just the footerelement in this case.
justify-content: center;'centers'#footer-container的孩子，这只是footer本例中的元素。
This is very similar to Nick N.'s solution, except that you don't have to reset the text-alignproperty on the footer, and that this is probably the non-'trick' way that you wanted.
这与 Nick N. 的解决方案非常相似，不同之处在于您不必重置text-align页脚上的属性，而且这可能是您想要的非“技巧”方式。
The accepted solution is slightly off because the footer's width in that case is variable (80%) instead of at 500px.
接受的解决方案略有偏差，因为在这种情况下页脚的宽度是可变的 (80%) 而不是 500px。
To other readers, if your parent is a formelement, and the child is an inputelement, use flex: 1;on the input(child) element, and use max-width: 500px;instead of width: 500px;. Using flex: 1;should make the inputelement expand to fill the formelement's width, which it might not otherwise do.
对于其他读者，如果您的父form元素是一个元素，而子input元素是一个元素，则flex: 1;在input（子）元素上使用，并使用max-width: 500px;代替width: 500px;。使用flex: 1;应该使input元素扩展以填充form元素的宽度，否则它可能不会这样做。
