如何由于绝对位置使屏幕中心的模态？

我为我的框架创建了一个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 ... –

如何由于绝对位置使屏幕中心的模态？

回答

相关问题