Html 带固定位置的可调整大小的居中div标签

我试图在浏览器的中心浮动一个固定位置的div标记，并使其即使在调整浏览器大小时也保持居中。我可以使它居中，但当浏览器调整大小时，它会向左移动，因为用于使它居中的边距

是否有一个CSS技巧，我可以用来使页边空白顶部和左侧动态？我还希望将容器的宽度设置为90%

#conntainer {
position:fixed;
width: 17028px; /* would like this to be width: 90%; */
height: 798px;
top: 50%;
left: 50%;
margin-top: -145px;
margin-left: -864px;
z-index: 100; 
}

---

改用CSS转换

#conntainer {
    position:fixed;
    width: 90%;
    height: 798px;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
}

请参见此处的概念验证小提琴：

这种方法的优点是，它还可以集中动态高度特性。。。尽管从您的示例中可以看出，您仍将坚持固定高度：）（在这种情况下，使用自动左/右边距而不进行变换就足够了）

p/s：您可能希望向属性添加供应商前缀（实际上仅为

-webkit-

）。

使用此选项：

#conntainer {
    position:fixed;
    width: 90%;
    height: 798px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    z-index: 100; 
}

---

这些边距在其他浏览器或屏幕尺寸上很可能没有用处。根据我的经验，翻译会使文本模糊，因为它使用亚像素定位。