固定位置的可調整大小的居中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屬性。