Question

我正在尝试在div元素中创建类似popup / modal的东西，并且我很难处理弹出窗口的居中。 div大小是已知的，但弹出窗口不是。

顺便说一句，我正在使用angular，弹出内容加载了ng-include。我尝试使用ng-include的加载选项，然后计算位置，但它无法正常工作。我想加载事件发生在模板完全编译并附加到dom之前（它有像ng-repeat那样的角度指令）。

类似于：

<div style="width: 400px; height: 600px;">
  <div>background content</div>
  <div class="modal center" ng-include="template"></div>
</div>

我也尝试使用margin auto，但我想我的设置是错误的。

希望找到解决方案，感谢。

Answer 1

试试这个：

.backgroundImage{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* also add vendor prefixes to support old versions */
}

.parentOfBackgroundImage{
    position: relative;
}

Answer 2

@Mr_Green的另一种解决方案是：

{

    left: 50%;
    top: 50%;
    margin-left: -200px; /* width / 2 */
    margin-top:-300px; /* height / 2 */
}

这适用于所有浏览器（甚至IE），但缺点是你必须知道盒子大小（你需要计算填充和边框！）

Answer 3

我会尝试将你的弹出窗口包装在这样的css表中：

<div id="yourDinamicDiv" style=position:relative">
  <div id="popup-wrapper" style="width:100%; height:100%; position:absolute; display:table">
    <div style="width: 400px; height: 600px; display:table-cell; vertical-align:middle;">
      <div>background content</div>
      <div class="modal center" ng-include="template"></div>
  </div>
</div>

希望这可以提供帮助。

将一个popup / modal置于div中

3 个答案: