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

Question

I'm trying to make a "modal" and everything works fine except for the first time I open a new modal window, it does not appear in the center of the page. After I open a modal for the first time then all the windows appear centered on the screen.

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> 

the variable $altura and $anchura = height and width are inside the click function so It takes the width and height of the current object.

Thanks.

Answer 1

When the assets inside your modal element fully load, your element's width/height will change, therefore your calculations will be wrong.

A long time ago I created something similar and had to insert a placeholder image into the modal's content. Then I changed that placeholder's src attribute for every image that I wanted to show. However, before displaying the modal I waited for the image to load. Here are some links to that project:

• 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

If you are supporting only modern Browsers though, you can center a block level element only with CSS. Here is an example of that:

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

Live example: http://jsbin.com/rawomasaqo/1/edit?css,output

Answer 2

My guess is when you call .height() the content is not yet rendered and sized. You'll want to do that when fadeIn is complete, or at least started. Alternately, using margin: auto; usually works for this sort of thing.