0

我找到了一些关于如何在孔屏中居中弹出 div 的解决方案，但我需要在其父 div 中居中（垂直和水平）。弹出窗口没有固定大小，它们是相对于父 div 的大小。我还没有找到任何关于这个的东西，我自己也做不到。因此，如果您有任何想法，请提供帮助。

这是我的代码：http: //jsfiddle.net/crXCz/

<div id="container" style="width: something; height: something;> some text <br> some text     
<div class="popup"></div>
</div>


div.popup {
    height: 95%;
    width: 95%;
    border-color: #d3d7cf;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    background-color: #f3f3f3;
    z-index: 1;
}
4

2 回答 2

0

如果我理解正确，您的两个元素的高度都是动态的。我通常做的是添加一些javascript。（假设 jQuery）

function verticalAlign(el) {
    // Calculate marginTop by taking parents height minus element height
    // and divide the value by two
    var marginTop = (el.parent().height() - el.height()) / 2;

    // Apply the top margin to the element
    el.css('margin-top', marginTop);
}

verticalAlign($('.verticalAlign'));
于 2012-12-23T19:02:18.227 回答
0

我们需要了解您的文档代码。但根据我的理解，您希望将 div 元素居中。将 div 元素的位置设置为相对位置，将主容器的位置设置为绝对位置，并在弹出框中添加以下CSS代码。

.popup{
position:absolute;
top:50%;
height: <your value in percentage>;
margin-top: (negative value of your height, divided by 2);
width:<your value in percentage>;
left:50%;
margin-left: (negative value of your width, divided by 2);
}
于 2012-12-23T18:57:10.447 回答