存储框架中的CSS模态窗口居中

Question

我是一个没有天赋，没有经验的业余爱好者。我必须不时地为我们的NetSuite B2B电子商务商店编写一些CSS代码。我们为每个顾客创建一个独特的商店。我们的一个客户想要一个弹出窗口在他们的商店当页面加载。我能够在我们的商店的splash页面上编辑3个独立框架的内容。否则，我将无法访问存储代码。在网上，我试着找到了一些例子。事实证明，我不能使用第三方服务器的例子。我必须找到一个纯CSS的例子，我做到了。我使用的CSS代码几乎完美。整个页面都是灰色的，这是我喜欢的，并且在页面加载时显示模态窗口。完美的。唯一的问题是，我有模态对话框左对齐。当我单独运行代码时，模态对话框是居中的，但当我在商店的框架中运行代码时，它是左对齐的。我想让它水平居中。我已经尝试了50次不同的迭代，结果总是一样的。我希望你能给我的神奇子弹，将最终中心模态对话框。(好…现在我很难弄清楚如何添加代码示例)

HTML

<div id="modal-1" class="modal animate-opacity">
<div class="modal-content">
<div class="modal-inner">
<span onclick="document.getElementById('modal-1').style.display='none'" class="modal-close">&times;</span>
<p><a href="http://www.myfsi.net" target="_blank"><img src="http://4119972-sb1.shop.netsuite.com/c.4119972_SB1/images/Splash/eiab_button.jpg"></a></p>
</div> 
</div>
</div>

CSS

.modal {
z-index: 10;
padding-top: 150px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);
}
.modal-content {
position: relative;
display: block;
width: 415px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
padding: 0;
outline: 0;
}
.modal-inner {
padding: 20px 30px; 
}
.modal-close {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
right: 0;
top: 0;
background: #ccc;
padding: 6px 10px;
}
.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}

Answer 1

我自己弄明白了相关代码修改如下

.modalz {
z-index: 10;
position: fixed;
top: 0;
left: 0;
display: inline-block;
height: 100%;
width: 100%;
overflow: auto;
padding-top: 250px;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);
}
.modalz-content {
position: absolute;
display: block;
width: 415px;
height: auto;
left: 50%;
margin-left: -200px;
background-color: #000;
padding: 0;
outline: 0;
}