如何在頁面上居中顯示一個模態窗口？

我正在嘗試在瀏覽器頁面中心模式窗口。我只是想把它放在中心位置，這樣它就能夠響應所有的屏幕。如何在頁面上居中顯示一個模態窗口？

2014-01-06 Raghu

試試這個... HTTP： //jsfiddle.net/9t3sn/4/ – Karuppiah

如果modal容器是如下：

<div id="containerDiv"> 
    <!--HTML modal --> 
</div>

添加CSS代碼

#containerDiv{ 
margin : 0 auto; 
}

來源

2014-01-06 06:33:27

注意：我需要確保不會繼承任何其他保證金屬性，如「保證金餘額」，「保證金」等，並取消設置。 –

帶位置：絕對假設你的模式是300×300

.modal { 
    width: 300px; 
    height: 300px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -150px; 
    margin-top: -150px; 
}

帶顯示：表對於另一種方法是使顯示錶

<div class="modal"> 
    <div class="body"> 
     <div class="content"> 
      Content goes here 
     </div> 
    </div> 
</div> 
<style> 
    .modal {display:table;} 
    .body {display:table-cell; vertical-align:middle; text-align:center;} 
</style>

來源

2014-01-06 06:35:13

「left：50％;'的問題在於它沒有考慮模態本身的寬度。 –

然後你可以像上面這樣使用頂部，左邊，右邊，底部：.modal {top：200px;左：100px的;右：100px的;底部：200像素; } –

我不知道爲什麼這個答案尚未被接受。 '左：50％;餘量： - （寬度的50％）;'肯定以模態窗口爲中心。 –

.modal 
{ 
position: fixed; 
left: 50%; 
}

來源

2014-01-06 06:36:01 Rohan

嘗試這在全頁預覽

.modal { 
 
     width: 100px; 
 
     height: 100px; 
 
     margin:0 auto; 
 
     display:table; 
 
     position: absolute; 
 
     left: 0; 
 
     right:0; 
 
     top: 50%; 
 
     border:1px solid; 
 
     -webkit-transform:translateY(-50%); 
 
     -moz-transform:translateY(-50%); 
 
     -ms-transform:translateY(-50%); 
 
     -o-transform:translateY(-50%); 
 
     transform:translateY(-50%); 
 
    }

<Div class="modal"></div>

來源

2015-12-25 09:15:53

如何在頁面上居中顯示一個模態窗口？

回答

相關問題