如何在屏幕上将不同大小的div居中

Question

我正在尝试制作一个“模态”，并且一切正常，但第一次打开新的模态窗口时，它不会出现在页面中央。 第一次打开模态后，所有窗口均居中显示在屏幕上。

HTML：

<div id="modal3" class="galleryContent">
    <div class="modalheader">
        <h3>Imagen 2</h3>
        <span class="fa fa-close"></span>
    </div>
    <div class="contenidomodal">
        <p>La imagen número 1 reprensta al profesor Sebastian.</p>
        <img src="img/copy_mcrepeatsalot.png" alt="Sebastian">
    </div>
    <div class="modalfooter">
        <button type="button" class="btn btn-default">Cerrar</button>
    </div>
</div>

jQuery的

  <script> var $overlay = $('<div id="overlay"></div>') $("body").append($overlay); $(document).ready(function(){ $("#imageGallery a").click(function(event){ event.preventDefault(); var $target = $(this).attr("data-target"); var $altura = $(".galleryContent").height(); var $anchura = $(".galleryContent").width(); $(".galleryContent").css("margin-top", - $altura/2); $(".galleryContent").css("margin-left", - $anchura/2); $overlay.fadeIn(); $($target).fadeIn(); $("#overlay").click(function(){ $($target).fadeOut(); $overlay.fadeOut(); }); $(".fa-close").click(function(){ $($target).fadeOut(); $overlay.fadeOut(); }); $(".modalfooter button").click(function(){ $($target).fadeOut(); $overlay.fadeOut(); }); }); }); </script> 

变量$ altura和$ anchura =高度和宽度位于click函数内部，因此它将获取当前对象的宽度和高度。

谢谢。

Answer 1

当模态元素内的资产完全加载时，元素的宽度/高度将发生变化，因此您的计算将是错误的。

很久以前，我创建了类似的东西，并且不得不在模式的内容中插入一个占位符图像。 然后，我为每个要显示的图像更改了占位符的src属性。 但是，在显示模态之前，我等待图像加载。 以下是该项目的一些链接：

• https://github.com/vasilionjea/jQuery-Ezbox--v0.0.3-/blob/master/ezbox.js#L73
• https://github.com/vasilionjea/jQuery-Ezbox--v0.0.3-/blob/master/ezbox.js#L164

但是，如果仅支持现代浏览器，则只能将CSS放在块级元素的中央。 这是一个例子：

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

实时示例： http ： //jsbin.com/rawomasaqo/1/edit？css，输出

Answer 2

我的猜测是，当您调用.height（）时，内容尚未呈现和调整大小。 您需要在fadeIn完成或至少开始时执行此操作。 或者，使用margin: auto; 通常适用于这种情况。