NetSuite B2B店铺框架内CSS模态窗口水平居中问题求助

我是一名经验尚浅的开发爱好者，日常需要为我们的NetSuite B2B电商店铺编写CSS代码，我们会为每个客户创建独立店铺。近期有客户要求其店铺页面加载时展示弹窗，我仅有权限编辑店铺启动页的3个独立frame内容，无法修改其他店铺核心代码。
我查找网络资料后排除了需要调用第三方服务的方案，最终选择了纯CSS实现方案。目前代码运行效果基本符合预期：页面加载时正常展示模态窗，整页灰化遮罩效果符合要求，但仅存在一个问题：该代码单独运行时模态框可水平居中，放到店铺frame内后模态框就左对齐，我尝试了数十种调整方案均未解决，希望能获得可实现模态框水平居中的可行方案。

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}}

居中失效是NetSuite店铺frame的父级样式覆盖了margin: 0 auto的计算规则导致的，可选择以下任意一种方案修改，无需改动HTML代码，仅调整CSS即可：

方案1：绝对定位+transform实现居中（兼容性最优） #

该方案兼容IE9及以上版本，不受任何父级margin规则影响，调整后代码最精简：

/* 仅修改.modal和.modal-content两个类的样式即可，其余代码保留不变 */
.modal {
    z-index: 10;
    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);
    /* 删掉原padding-top属性，改到modal-content中定义 */
}
.modal-content {
    position: absolute;
    left: 50%;
    top: 150px; /* 和原padding-top值保持一致 */
    transform: translateX(-50%);
    display: block;
    width: 415px;
    /* 删掉原margin-left和margin-right属性 */
    background-color: #fff;
    padding: 0;
    outline: 0;
}

方案2：flex布局实现居中 #

该方案逻辑更直观，适配现代所有浏览器，可按需选用：

/* 仅修改.modal和.modal-content两个类的样式即可，其余代码保留不变 */
.modal {
    z-index: 10;
    padding-top: 150px;
    box-sizing: border-box;
    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);
    /* 新增flex居中规则 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.modal-content {
    position: relative;
    display: block;
    width: 415px;
    /* 删掉原margin-left和margin-right属性 */
    background-color: #fff;
    padding: 0;
    outline: 0;
}

内容的提问来源于stack exchange，提问作者Tom3