将页脚固定到页面底部（无标题）

Question

我还在学习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; 
}

就像我说中心文本工作正常，即使我调整页面它仍然保持中心，我只想在页面下方保持固定到底部。感谢任何有用的帮助〜

Answer 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>

Answer 2

Methord 1：

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

.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>

Methord 2： 您也可以浏览flexbox，因为它具有较少的属性，易于使用且具有响应性。