Center modal in twitter-bootstrap

Question

I can't focus my modal twitter bootstrap with different sizes. Here you can see a live example here and here . (just click on the image or "Report this image"). You will see that the modal works like a charm, but it is not located horizontally. I tried everything: fields, float, text-align and even <center>

.modal:

 .modal { position: fixed; top: 10%; z-index: 1050; width: auto; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; outline: none; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } 

.modal bodies:

 .modal-body { margin: 0 auto 0 auto; position: relative; padding: 15px; overflow-y: auto; } 

Answer 1

I know this a little later, but I found a solution to the whole problem of centering Bootstrap Modal with different heights than the standard (single) one.

 $("#yourModal").modal('show').css({ 'margin-top': function () { //vertical centering return -($(this).height() / 2); }, 'margin-left': function () { //Horizontal centering return -($(this).width() / 2); } }); 

Answer 2

A solution that works regardless of the size of the child (in this case, modal). It can also be used for centering vertically.

 .centered { left: 50%; transform: translateX(-50%); } 

Essentially, what we do here is push the element directly half the width of the parent container. In the case of modality, the parent must (must) be the body. The transform property is an extension of the element left by half of its own .

Edit: center vertically

 .centered { top: 50%; transform: translateY(-50%); } 

Note. I think that horizontal centering only works if the height / width of the parent matches, since% comes from the parent width. If they do not match, just use the parent height.

Answer 3

This is not a modal body that needs to be centered; it is a general modal body. Since this is fixed positioning, you can do it with CSS and jQuery (since jQuery is already in use):

CSS

 .modal { left: 50%; } 

JQuery

 $('.modal').each(function(){ var modalWidth = $(this).width(), modalMargin = '-' + (modalWidth/2) + 'px!important'; $(this).css('margin-left',modalMargin); }); 

---

Alternatively, this is only possible with CSS:

 .modal { width: 100%; left: 0; background-color: transparent; } .modal-body { display: inline-block; background-color: #FFF; } .modal img { min-width: none!important; } 

Answer 4

Alternative to @Coop answer. Since you have a fixed width text area, you can set the modality width and use negative margins instead of jquery.

 .modal { left:50%; width:444px; margin-left:-222px; } 

There is nothing in your current code that would allow a modal center.

Answer 5

You can use jquery to reproduce this behavior:

 left: 50%; width: 560px; margin-left: -280px; 

Calculating div width and asign css

 $(document).ready(function () { var modalWidth = $('#myModal').width(); $('#myModal').css("left", "50%"); $('#myModal').css("width", modalWidth); $('#myModal').css("margin", (modalWidth/2)*-1); }); 

Answer 6

  .modal-dialog { padding-top: 15%; }