如何使 div 以固定位置水平居中？ [复制]
Posted
技术标签:
【中文标题】如何使 div 以固定位置水平居中？ [复制]【英文标题】：how to make div center horizontally with fixed position? [duplicate] 【发布时间】：2013-04-10 03:26:45 【问题描述】：我想让div水平居中，css代码是这样的：
<style type="text/css">
#footer
position: fixed;
bottom: 20px;
background-color: red;
width:500px;
margin: auto;/*left:auto; right:auto;*/
</style>
和html代码：
<body>
<div id="footer">hello world</div>
</body>
我觉得不用解释我的css代码，几乎是不言自明的，但是div不是水平居中的，有什么办法可以做到吗？ 提前致谢。
【问题讨论】：
位置：固定和边距：自动；合作不好，我正在为您制定解决方案。 【参考方案1】：试试这个
#footer
position: fixed;
bottom: 20px;
background-color: red;
width:80%;
margin: 0 0 0 -40%;
left:50%;
JS Fiddle Example
这里要注意的一点是，负的margin-left正好是width的一半，并设置了left的50%的body
【讨论】：
您的答案和@gregbenner 的答案都使用了这个“技巧”，首先，谢谢。我也刚搜了google，其他人也用这种方式，不知道有没有trick的方式可以做到呢？
这实际上是一个不错的解决方案。但这并不是他想要做的。这样，页脚将变得具有响应性，并且不会具有 500 像素的固定宽度。
ya @Nick，但我也提到了它背后的技巧。 （s）他可以很容易地改变他喜欢的尺寸。
@Sachin 是的，你是对的。除了使用这样的技巧或容器 DIV 之外，可能没有其他方法。
所以@HiwayChe 接受您使用的答案。因为可能没有更好的答案可以给出。【参考方案2】：
这对你应该很有效。它通过添加容器 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>
【讨论】：
“文本对齐：居中；”将导致文本居中和 IE6 工作。如果你不想居中，但喜欢 IE6 工作。将 text-align:left 添加到#footer div。【参考方案3】：在其中放置另一个具有相对位置的 div，margin: auto。 给固定的一个 100% 宽度。
否则你可以用负边距“技巧”破解它
div
position: fixed;
left: 50%;
width: 500px;
margin-left: -250px;
【讨论】：
【参考方案4】：如果您使用现代浏览器，您可以使用 flexbox 布局模块：http://caniuse.com/#feat=flexbox。
Flexbox 文档：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes注意：由于我的代表，不能发布两个以上的链接。
JSFiddle.
（使用footer 标签而不是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 的子元素，在本例中就是 footer 元素。
这与 Nick N. 的解决方案非常相似，只是您不必重置页脚上的 text-align 属性，而且这可能是您想要的非“技巧”方式。
接受的解决方案略有偏差，因为在这种情况下页脚的宽度是可变的 (80%) 而不是 500 像素。
对于其他读者，如果您的父元素是form 元素，而子元素是input 元素，请在input（子）元素上使用flex: 1;，并使用max-width: 500px; 而不是@987654336 @。使用flex: 1; 应该使input 元素扩展以填充form 元素的宽度，否则它可能不会这样做。
【讨论】：
这个解决方案效果很好。真的应该有一种将答案标记为“现代浏览器”的方法，这样我们就可以在仅支持现代浏览器时将它们排序到顶部。 这太好了，谢谢以上是关于如何使 div 以固定位置水平居中？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章