CSS：固定在底部并居中

我需要我的页脚被固定在页面底部并居中。页脚的内容可能会随时改变，所以我不能通过左边距将其居中：xxpx；右边距：xxpx

问题在于，出于某种原因，这不起作用：

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

我在网上爬网，什么也没找到。我试着制作一个容器div和nada。我尝试了其他组合和古尼什。我怎样才能做到这一点

---

谢谢

您应该使用粘性页脚解决方案，例如：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

还有这样的人,

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

使用html：

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

---

我发现有两个潜在问题：

1-IE的位置有问题：过去已修复。如果您将IE7+与有效的doctype或非IE浏览器一起使用，这不是问题的一部分

2-如果希望页脚对象居中，则需要为页脚指定宽度。否则，它默认为页面的全宽，并将左侧和右侧的自动边距设置为0。如果希望页脚栏占据宽度（如StackOverflow通知栏）并使文本居中，则需要在定义中添加“文本对齐：居中”

jQuery解决方案

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

$（函数（）{
$（窗口）。调整大小（函数（）{
placeFooter（）；
});
placeFooter（）；
//在定位之前将其隐藏
$（'#footer'）.css（'display'，'inline'）；
});
函数placeFooter（）{
var windHeight=$（窗口）.height（）；
var footerHeight=$（'#footer'）.height（）；
var offset=parseInt（风高）-parseInt（页脚高度）；
$（'#footer'）.css（'top'，offset）；
}
我是一只脚

有时候，实现JS比破解旧的CSS更容易

---

我已将“问题div封装在另一个div中”让我们将此div称为封闭div。。。 使css中的封闭div的宽度为100%，位置固定为底部0。。。 然后将问题div插入到include div中这就是它的外观

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

然后在html中

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

好了
-超文本

修订版：

只需在CSS中更改以下行

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

和html格式：

<p class="enclose problem">
Your footer text here.
</p>

这里是您的页脚文本。

根据@Michael的评论：

有一种更好的方法可以做到这一点。只需使用 位置：相对和填充页脚+空格的大小 在所需的内容和页脚之间。然后，只需使用 绝对和底部：0

我去挖掘解释，它归结为：

• 默认情况下，bottom:0px的绝对位置将其设置为窗口底部…而不是页面底部
• 相对定位元素重置其子元素绝对位置的范围…因此，通过将主体设置为相对定位，bottom:0px的绝对位置现在真正反映了页面的底部

---

更多详细信息参见问题在于

位置：static

。静态意味着不做任何事情的立场<代码>位置：绝对是您想要的。不过，将元素居中仍然很棘手。以下方面应起作用：

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

或

但我推荐第一种方法。 我使用了这个答案中的定心技术：

---

下面是一个使用css网格的示例

html，正文{
身高：100%；
宽度：100%；
}
.集装箱{
身高：100%；
显示：网格；
/*我们把这一页分成三部分*/
网格模板行：20px自动30px；
文本对齐：居中；/*这是为了使元素居中*/
}
.container.footer{
网格行：3；/*页脚将占据最后一行*/
显示：内联块；
利润上限：-20px；
}

文件
这是页脚

我遇到了一个问题，典型的

位置：fixed

和

bottom:0

不起作用。发现了一个带有

位置：sticky

的简洁功能。请注意，它是“相对”新的，因此不会与IE/Edge 15及更早版本兼容

这里有一个学校的例子

粘滞的{
位置：粘性；
底部：0；
背景颜色：黄色；
填充：30px；
字体大小：20px；
}
我的知识来自于我的朋友，我的生活来自于我的朋友。前总统尼斯勒·伊斯特（Maecenas nisl est）、弗里涅格斯塔斯·奥迪奥（dolor nteger frinegestas odio）和维塔斯·斯克利斯（vitae scelerisque enim ligula venenatis dolor）。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳·德莱里克·伊尼姆·利古拉·维内纳蒂斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳·德莱里克·伊尼姆·利古拉·维内纳蒂斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。梅塞纳斯·多洛·恩特格·弗里涅格斯塔斯·奥迪奥，维塔·斯克利尔·埃尼·维内纳提斯·多洛。Maecenas dolor nteger frinegestas odio，
#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}