css - 如何在 div 中居中弹出窗口？

Question

我找到了一些关于如何将弹出式 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;
}

Answer 1

我们需要了解您的文档代码。但根据我的理解，您想将 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);
}