對齊模態對話框

我正在嘗試對齊頁面中心的模態對話框（在本例中爲確認對話框）。因此，我設置主容器的位置是相對的，並且然後使用以下CSS代碼定位在模態對話框的div元素：對齊模態對話框

.confirmBox{ 
    top:25%; 
    left:25%; 
}

我已經調整了頂部和左側的值屬性。這可以在較低的縮放範圍內正常工作，但是由於放大該框不會保留在頁面的中心。我怎樣才能解決這個使用CSS？

原始代碼實際上很大，我無法想到這種情況下的實例。我仍然在考慮將class =「confirmBox」的div元素作爲confirmBox的代碼並附上小提琴http://jsfiddle.net/W6ATN/47/。

來源

2012-12-19 Sumit Gera

你可以發佈一些代碼嗎？ JSFiddle或上下文？ – MikeTedeschi

這裏是小提琴再次.. http://jsfiddle.net/W6ATN/47/ –

您可以使用50％的左側和頂部位置，然後減去一半的寬度和高度，以彌補元素的大小：

position:absolute; 
top:50%; 
height: <your value>px; 
margin-top: (negative value of your height, divided by 2); 
width:<your value>px; 
left:50%; 
margin-left: (negative value of your width, divided by 2);

我覺得這種方式比較容易理解。如果元件的寬度爲40％（其容器），那麼它應該是30％至被平等中心左：

|-----30%-----|-------40%--------|-----30%-----|

其中所有== 100％

或者

您可以使用％的寬度和高度％，並用簡單的數學計算出左側和頂部定位：

position:absolute; 
height:40%; 
width:40%; 
left:30%; // (100 - width) divided by 2 
top:30%; // (100 - height) divided by 2

來源

2012-12-19 20:12:30

iight ...請看看小提琴。並觀察放大的行爲。 –

你可以這樣做：http://jsfiddle.net/W6ATN/48/ 或http://jsfiddle.net/W6ATN/49/都與我的答案類似。一旦使用％一個使用邊際。 –

那就是我想要的。你可以給我任何鏈接，以便我可以理解幕後發生了什麼.. –

// Slightly modified custom css with all due credit to it's previous owner 
// 
//   @@ Cat... 

.vertical-align-center { 

left: 0%; // <<<------ Align left and comfortably stretch across the screen 
display: table-cell; 
vertical-align: middle pointer-events: none; 
}

來源

2018-03-02 15:16:25 user9434733

對齊模態對話框

回答

相關問題