固定位置的可调整大小的居中div标记

Question

我试图在浏览器的中心浮动一个固定位置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; 
} 

Answer 1

用这个代替：

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

jsFiddle example

Answer 2

改为使用CSS变换。

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

看到，有证据的概念小提琴这里：http://jsfiddle.net/teddyrised/vbdCz/

这种方法的优点是，它也为中心的动态高度财产......虽然它从你的榜样，你会坚持出现无论如何都是固定的高度:)（在这种情况下，使用自动左/右边距而无需变换就足够了）。

p/s：您可能希望将供应商前缀（实际上只是-webkit-）添加到CSS transform属性。