Javascript css在不同维度上的定位不同

我在一个div中有一个按钮。div父对象具有position:absolute，并且在浏览器窗口中完全位于左侧。子按钮的位置：固定，因为我希望子按钮始终与浏览器窗口底部保持一定距离（无论父div如何）

我想要的是在浏览器窗口中将父div水平居中（最好的方法是什么？）；但是，子按钮位于错误的x位置，因为它应该相对于div，但是固定的。基本上，按钮的x位置应该相对于父div，而y位置应该相对于浏览器窗口（即固定）

我怎样才能做到这一点

T
.视口{
背景：白色；
高度：1024px；
高度：900px；
宽度：768px；
保证金：0em自动；
溢出：隐藏；
位置：绝对位置；
}
#t{
身高：2.2米；
文本对齐：居中；
背景：#CA6161；
边框：薄实线#943232；
颜色：#FFF；
位置：固定；
底部：0.3em；
左：57.7em；
边框底部：薄实线#FFF；
边框顶部：薄实心#CFCFCF；
左边框：薄实线#CFCFCF；
右边框：薄实线#FFF；
边界半径：5px；
}

只需从父级删除绝对属性，从子级删除左属性

.viewport {
background: white;
height: 1024px;
height: 900px;
width: 50px;
margin: 0 auto;
overflow: hidden;
}

#t{

height: 2.2em;
text-align: center;
background: #CA6161;
border: thin solid #943232;
color: #FFF;
position: fixed;
bottom: 0.3em;
border-bottom: thin solid #FFF;
border-top: thin solid #CFCFCF;
border-left: thin solid #CFCFCF;
border-right: thin solid #FFF;
border-radius: 5px;
}

---

没有代码，通常很难猜出确切的问题是什么，而猜答案通常是任何人唯一能做的事情。如果您提供了以前尝试的一段代码，那么理解您遇到的确切问题就会容易得多。这段代码甚至可以是根本不起作用的代码，因为它仍然可以让您更好地了解您到底在做什么。您能提供您遇到问题的代码示例吗？理想情况下，设置一个提琴来帮助我们测试它。添加了一个提琴和代码

.viewport {
background: white;
height: 1024px;
height: 900px;
width: 50px;
margin: 0 auto;
overflow: hidden;
}

#t{

height: 2.2em;
text-align: center;
background: #CA6161;
border: thin solid #943232;
color: #FFF;
position: fixed;
bottom: 0.3em;
border-bottom: thin solid #FFF;
border-top: thin solid #CFCFCF;
border-left: thin solid #CFCFCF;
border-right: thin solid #FFF;
border-radius: 5px;
}