центр всплывающего окна/модальный внутри div

Question

Я пытаюсь создать что-то вроде всплывающего/модального внутри элемента div, и мне трудно справляться с центрированием всплывающего окна. Размер div известен, но всплывающего окна нет.

Btw, я использую угловой, и всплывающее содержимое загружается с помощью 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>

Я также попытался с маржинальным авто, но я предполагаю, что моя установка не так.

надеется найти решение, Спасибо.

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> 

Надеется, что это может помочь.