跨瀏覽器對齊未知大小的div

Question

我試圖實現居中垂直和水平對齊的div。 這是我使用的樣式：

.box{ 
    position:fixed; 
    display:block; 
    width:200px; 
    height:400px; 
    top:50%; 
    left: 50%; 
    width: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    background:#ccc; 
} 

這種風格完美的作品在Firefox，但無法在Chrome。這裏的例子：http://codepen.io/0leg/full/HJjrK

有趣的事情是，我舉起這個造型從本教程http://tympanus.net/Development/ModalWindowEffects/一個模式窗口，出於某種原因，這完全在WebKit瀏覽器...

Answer 1

這很簡單，因爲即使是最新版本的Chrome，您也需要使用供應商前綴-webkit-進行CSS3轉換。自從v16（目前v25）以來，Mozilla Firefox一直支持前綴轉換，諷刺的是，當前版本的IE也是如此。在瀏覽器支持的更多信息，請訪問：http://caniuse.com/transforms2d

因此，使用供應商前綴（只是-webkit-就足夠了，除非你想支持舊版本的IE和Firefox，然後利用各自的供應商前綴，太）：

.test { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    background: red; 
    width: 200px; 
    height: 200px; 
} 

http://codepen.io/terrymun/pen/zCgkI

Answer 2

正如你所知道的高度和在div的寬度，我想你的CSS改成這樣：

.box{ 
    position:absolute; 
    width:50%; 
    height:400px; 
    top:50%; 
    left: 50%; 
    margin-top: -200px; /* Half the height of the div */ 
    margin-left: -25%; /* Half the width of the div */ 
    background:#ccc; 
} 

你移動DIV一半下來，整個頁面，然後負裕回來了一半的它的寬度。

http://jsfiddle.net/davidpauljunior/utPhs/2/

注意：您有兩個寬度聲明，我認爲你想要的第二個（50％），所以去掉第一個。我改變了位置固定爲絕對，但它適用於兩個，我刪除了顯示：塊作爲<div>已經是一個塊級元素。