html - 在 div 中居中弹出/模态

Question

我正在尝试在 div 元素内创建类似于弹出窗口/模式的内容，但我很难处理将弹出窗口居中的问题。 div 大小已知，但弹出窗口未知。

顺便说一句，我正在使用 angular 并且弹出内容是使用 ng-include 加载的。我尝试使用 ng-include 的加载选项，然后计算位置，但它没有用。我猜加载事件发生在模板完全编译并附加到 dom 之前(它有像 ng-repeat 这样的 Angular Directive(指令))。

它是这样的:

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