2

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

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

我已经调整了顶部和左侧属性的值。这在较低的缩放比例下效果很好，但是当我放大该框时，它不会保留在页面的中心。如何使用 CSS 解决这个问题？

原始代码实际上很大，我想不出这种情况的实例。我仍然在考虑将带有 class="confirmBox" 的 div 元素作为 confirmBox 的代码并附加小提琴http://jsfiddle.net/W6ATN/47/。

4

2 回答 2

4

可以使用 50% 的 left 和 top 位置，然后减去一半的宽度和高度来弥补元素的大小：

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-19T20:12:30.387 回答
0 
// 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-02T15:16:25.173 回答