html - 让这个页脚出现在所有分辨率的相同位置的中心？

Question

我有这个 css，现在它看起来像是在我的 1366x768 笔记本电脑屏幕上想要的，它出现在屏幕底部的中心。但是当我将它移到更大的屏幕上时，页脚出现在不同的位置，在页面的更上方。

任何人都可以给我一些建议吗？

position:relative;  
width:900px;
height:70px;
background-color:#0CF;
margin-top:38%;
right:25%;
left:50%;
margin-left:-450px;

Answer 1

这就是为什么：

margin-top:38%;

任何不同屏幕高度的 38% 都会导致页脚的位置不同，假设它是相对于 body 的位置，而不是相对于可能具有另一个位置的另一个元素的位置。在你的情况下，我愿意打赌它是相对于身体的。

如果将其更改为绝对位置，则给它一个底部值，它将粘在屏幕底部。

position:absolute;  
width:900px;
height:70px;
background-color:#0CF;
bottom:0;
right:25%;
left:50%;
margin-left:-450px;

Answer 2

如果你这样做

position: absolute;
margin-right: auto;
margin-left: auto;

使用您已经拥有的宽度，应该将其居中。然后

bottom: 0;

应该把它放在屏幕的底部。然后你可以摆脱left, right, margin-top.

[编辑] 完成的东西看起来像这样

position: absolute;  
width: 900px;
height: 70px;
background-color: #0CF;
margin-left: auto;
margin-right: auto;
bottom: 0;