在瀏覽器窗口中居中，可在野生動物園中使用，但在Firefox或Chrome中無法使用

Question

無論頁面滾動到何處，我都需要一個彈出窗口位於瀏覽器窗口的中心。 窗口函數與jquery一起使用。 這在Safari中有效，但在其他瀏覽器中無效：

#infoBox1, #infoBox2, #infoBox3, #infoBox4 {
    position: fixed;
    display: none;
    width: 70%;
    height: auto;
    top: 30%;
    left: 50%;
    margin: -15% -35% 0 -35%;
    z-index: 400;
}

任何建議，將不勝感激。

Answer 1

您可以使用以下命令將元素居中：

 .div { 
    position:absolute; // or use fixed;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
 }

Answer 2

試試這個，希望有幫助

#infoBox1, #infoBox2, #infoBox3, #infoBox4 {
    position: fixed;
    display: none;
    width: 70%;
    height: auto;
    top: 50%;
    left: 50%;
    z-index: 400;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}

Answer 3

這應該可以解決問題：

#infoBox1, #infoBox2, #infoBox3, #infoBox4 {
    position: fixed;
    display: none;
    width: 70%;
    height: auto;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    z-index: 400;
}

transform:translate(-50%, -50%)將確保left 50%和top 50%來自所選div的內部，而不僅僅是外部使其位於左側/頂部，然后您期望成為。