将页脚固定到页面底部（无页眉）答案

【问题标题】：Fix footer to bottom of page (no header)将页脚固定到页面底部（无页眉）
【发布时间】：2016-12-18 22:16:50
【问题描述】：

我仍在学习 CSS，但我还不太好，如果您能找到解决此问题的方法，您能否提供一个示例，说明我在哪里放置或删除新的 CSS。我现在已经尝试了至少 30 种不同的方法，但找不到合适的方法。

我的屏幕中没有标题的文本居中，但我想将第二个文本强制放在其下方的底部。

这是一张有助于代表我的设置的图片：

这是我用来使文本居中的一些代码（我想让它尽可能不受影响，这样居中的文本和页脚都可以正常工作）

<div class="centered">
    <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>

这是我开始的 CSS：

.centered {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.footer {
  position:fixed; 
  bottom:0; 
  clear:both; 
  height:75px; 
}

就像我说的，即使我调整页面，居中的文本也能正常工作，我只想在它下面有一个页脚，它会固定在底部。感谢您的帮助，非常感谢~

【问题讨论】：

标签： html css css-position footer

【解决方案1】：

你已经做到了！

.footer {
    position: fixed;
    bottom: 0;
    clear: both;
    height: 75px;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer {
  position: fixed;
  bottom: 0;
  clear: both;
  height: 75px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
}

<div class="centered">
  <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>

【讨论】：

谢谢，在它被卡在屏幕顶部的居中文本之前，但这次效果很好。

【解决方案2】：

方法一：

据我所知（如果我错了，请原谅）你应该有一个亲戚来使用绝对值。至于你想要居中的文本，你可以通过使用你想要放置它的内部部分来完成它。我使用了填充，因为我这里没有内部部分。

.centered {
text-align: center;
padding-top: 80px;
position: relative;
}

.footer {
position: absolute;
clear: both;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}

<div class="centered">
    <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>

方法二：你也可以通过flexbox，因为它的属性较少，易于使用并且响应迅速。

【讨论】：