在 div 中居中弹出/模态框答案

【问题标题】：center a popup/modal inside a div在 div 中居中弹出/模态框
【发布时间】：2015-02-02 11:38:37
【问题描述】：

我正在尝试在 div 元素内创建类似弹出/模态的东西，但我很难处理使弹出窗口居中的问题。 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>

我也尝试了自动边距，但我想我的设置是错误的。

希望能找到解决办法，谢谢。

【问题讨论】：

标签： html css angularjs

【解决方案1】：

试试这个：

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

.parentOfBackgroundImage{
    position: relative;
}

【讨论】：

【解决方案2】：

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

{

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

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

【讨论】：

【解决方案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>

希望这能有所帮助。

【讨论】：