模态框的对齐

Posted 2021-04-07

我试图在页面的中心对齐模态框（在这种情况下，它是一个确认框）。所以我将主容器的位置设置为相对，然后使用以下CSS代码定位模式框的div元素：

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

我调整了top和left属性的值。这在较低的缩放下工作正常但是当我放大框时不会保留在页面的中心。如何使用CSS解决这个问题？

原始代码实际上很大，我无法想到这种情况下的实例。我仍在考虑使用class =“confirmBox”的div元素作为confirmBox的代码并附加小提琴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％

要么

您可以使用％width和％height，并使用简单的数学计算出左侧和顶部定位：

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

另一答案

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