title: center a popup/modal inside a div
body: <p>I'm trying to create something like a popup/modal inside a div element and I'm getting a hard time dealing with centering the popup. The div size is known, but the popup isn't.</p>
  
  <p>Btw, I'm using angular and the popup content is loaded with ng-include. I tried using the load option of ng-include and then calculating the position but it wasn't working. I guess the load event happens before the template is completely compiled and attached to the dom (it has angular directives like ng-repeat).</p>
  
  <p>It is something like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 400px; height: 600px;"&gt;
    &lt;div&gt;background content&lt;/div&gt;
    &lt;div class="modal center" ng-include="template"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also tried with margin auto, but i guess my setup is wrong.</p>
  
  <p>hope to find a solution,
  Thanks.</p>