Css 如何使div在固定位置上水平居中？_Css_Html_Center

Css 如何使div在固定位置上水平居中？

css html

Css 如何使div在固定位置上水平居中？,css,html,center,Css,Html,Center,我希望div水平居中，css代码如下： <style type="text/css"> #footer{ position: fixed; bottom: 20px; background-color: red; width:500px; margin: auto;/*left:auto; right:auto;*/ } </style> #页脚{ 位置：固定；底部：20px；背景色：红色；宽度：500px

我希望div水平居中，css代码如下：

<style type="text/css">
#footer{
    position: fixed;
    bottom: 20px;
    background-color: red;
    width:500px;
            margin: auto;/*left:auto; right:auto;*/
}
</style>


#页脚{
位置：固定；
底部：20px；
背景色：红色；
宽度：500px；
边距：自动；/*左：自动；右：自动*/
}

和html代码：

<body>
<div id="footer">hello world</div>
</body>


你好，世界

我认为没有必要解释我的css代码，它几乎是不言自明的，但是div不是水平居中的，有没有办法做到这一点？

提前感谢。

将另一个div放入其中，并带有相对位置，边距：auto。给固定的一个100%的宽度

否则，您可以使用负边距“技巧”进行破解

div { 
    position: fixed;
    left: 50%;
    width: 500px;
    margin-left: -250px;
}

试试这个

#footer{
    position: fixed;
    bottom: 20px;
    background-color: red;
    width:80%;
    margin: 0 0 0 -40%;
    left:50%;
}

这里需要注意的一点是，负的

左边距

正好是

宽度

的一半，并设置

左边

身体的50%

这应该对您很有效。它通过添加容器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>


#页脚容器{
位置：固定；
底部：0；
左：0；
宽度：100%；
文本对齐：居中；
}
#页脚
{
宽度：500px；
保证金：0自动；
边缘底部：20px；
背景色：红色；
}
你好，世界

如果使用现代浏览器，可以使用flexbox布局模块：

Flexbox文档：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible\u-box
注意：由于我的代表原因，不能发布超过两个链接

（使用

footer

标记而不是

div#footer

，因为这样更简单。）

justify content:center

'centers'

#footer container

的子元素，在本例中，它只是

footer

元素

这与Nick N.的解决方案非常相似，只是您不必重置页脚上的

文本对齐

属性，而且这可能是您想要的非“技巧”方式

可接受的解决方案有点偏差，因为在这种情况下，页脚的宽度是可变的（80%），而不是500px

对于其他读者，如果您的父元素是

表单

元素，而子元素是

输入

元素，请使用

flex:1输入（子）元素上进行编码>，并使用最大宽度：500px代替宽度：500px。使用flex:1
应使输入
元素展开以填充表单
元素的宽度，否则它可能不会这样做。
位置：固定，边距：自动；如果合作不顺利，我正在为您制定解决方案。您的答案和@gregbenner的答案都是使用这个“技巧”，首先，谢谢。我也刚刚搜索过谷歌，其他人也用这种方式，我想知道是否有一种“无技巧”的方法可以做到这一点？这实际上是一个很好的解决方案。但这并不完全是他想要做的。这样，页脚将变得灵敏，不会有500px.ya@Nick的固定宽度，但我也提到了它背后的技巧。（s） 他可以随意改变尺寸。@Sachin是的，你说得对。除了使用这样的技巧或容器DIV之外，可能没有其他方法了。因此@HiwayChe接受您使用的答案。因为可能没有更好的答案了。“文本对齐：居中；”将导致文本居中，IE6正常工作。如果你不想集中精力，但喜欢IE6工作。将文本对齐：向左添加到#footer div。此解决方案非常有效。应该有一种方法将答案标记为“现代浏览器”，这样我们就可以在只支持现代浏览器的情况下将答案排在最前面。这很好，谢谢
<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;
}