Centering modal in twitter-bootstrap

Question

I can't center my modal in twitter-bootstrap with various sizes. You can see live example here and here. (just click on the picture or "Report this image"). You'll see that modal is there working like charm, but it isn't horizontally centered. I tried everything: margins, 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-body:

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

Answer 1

I know it's a little late, but I found the solution to all the problem with centering the Bootstrap Modal with different heights than the standard's (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 child element size (in this case the modal). Can also be used to center vertically.

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

Essentially what we are doing here is pushing the element right by half of the parent container's width. In the case of the modal the parent would (should) be the body. The transform property is the pulling the element left by half of its own width.

Edit: To center vertically

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

Note: I think the horizontal centering only works if the height/width of the parent are the same, as the % comes from the parent width. If they are not the same then just use the parent height.

Answer 3

It's not the modal body that needs centering, it's the overall modal. Since that has fixed positioning, you could do it with CSS and jQuery (since jQuery is already being used):

CSS:

.modal { left: 50%; }

jQuery:

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

---

Alternatively it is possible with just 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's answer. As you have a fixed width text area there, you can set the width of the modal and use negative margins rather than jquery.

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

In your current code, there is nothing that will allow the modal to center.

Answer 5

You can use jquery to reproduce this behaivor:

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

Calculating the width of the div 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%;
  }