Question

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

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

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

原始代码实际上很大，我无法想到这种情况的实例。我仍在考虑使用class =“confirmBox”的div元素作为confirmBox的代码并附加小提琴http://jsfiddle.net/W6ATN/47/。

Answer 1

您可以使用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

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

模态框的对齐

2 个答案: