如何由於絕對位置使屏幕中心的模態？

我爲我的框架創建了一個Modal。我創建了一切像HTML代碼，CSS代碼& JS Codes ...，它工作非常好！如何由於絕對位置使屏幕中心的模態？

我唯一的問題是，我不能讓CENTER & RESPONSIVE ... 這是我的模態DIV + CSS代碼：

.ji-modal { 
    width: 700px; 
    height: auto; 
    background-color: #FFF; 
    border: 1px solid #CCC; 
    position: fixed; 
    top: 70px; 
    left: 325px; 
    display: none; 
    z-index: 1000005; 
}

我已閱讀，如果你的寬度是固定的&您的標籤有一個絕對的或固定的位置，你可以通過給50％左右RO讓它中心，但它不工作太...

任何幫助，謝謝...

來源

2016-07-30 Ali Bahaari

要使它響應，而是嘗試設置th e width使用%或vw單位。另外，要將其居中放置，可以使用margin: 0 auto。垂直居中會更棘手一點，請查看this answer瞭解更多。

來源

2016-07-30 15:08:11 Oskar

謝謝奧斯卡，我用了90％的寬度＆因爲我的DIV是絕對的，我把5％作爲中心... –

百分比設置大小是一個不錯的選擇，另一種選擇是使用transform：

.modal { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

這樣的模式從頂部移到50％，離開，然後調整回基於的尺寸模態本身。這對於任何情況都不是很理想，但在許多模式用例中運行良好。

來源

2016-07-30 15:13:12 Toby

謝謝Toby ... –

如何由於絕對位置使屏幕中心的模態？

回答

相關問題