Question

我有一个弹出窗口，它出现在页面的负载上，但是我无法集中对齐它。以下是弹出窗口的CSS：

    .reveal-modal 
{
padding:30px;
display: none;
position:relative;`
align:center;
margin:0 auto;
z-index:100000;
background:#FFFFFF;
border:2px solid #000;
word-wrap: break-word;
top:25%;
width:300px;
height:300px;
}

尽管有任何屏幕尺寸，它应该位于屏幕的中心

Answer 1

你可以习惯定位 fixed并像这样应用一些css。

 .reveal-modal 
{
padding:30px;

position:fixed;`
z-index:100000;
background:#FFFFFF;
border:2px solid #000;
width:300px;
height:300px;
    top:50%;
    left:50%;
    margin-top:-180px;
    margin-left:-180px;
}

<div class="reveal-modal">My Popup Content  </div>

Answer 2

替代方案 - transform: translate

删除align:center;

＆＃13;

.reveal-modal {
    padding:30px;
    /*display: none;*/
    position:  fixed; top: 50%; left: 50%;    
    margin:0 auto;
    z-index: 100000;
    background: #FFFFFF;
    border: 2px solid #000;
    word-wrap: break-word;    
    width:300px;
    height:300px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}

＆＃13;

<div class="reveal-modal">popup</div>

＆＃13;

集中对齐弹出窗口

2 个答案: