Bootstrap 3 Modal Vertical Position Center

Bootstrap 3 modal vertical position center

I came up with a pure css solution! It's css3 though, which means ie8 or lower is not supported, but other than this it's tested and working on ios, android, ie9+, chrome, firefox, desktop safari..

I am using the following css:

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

Here is a fiddle.
http://codepen.io/anon/pen/Hiskj

..selecting this as the correct answer since there's no extra heavy javascript that brings the browser to its knees in case of more than one modals.

How to vertically center modal?

Not tested but you can try this

.yourElement{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Bootstrap 3 modal vertical position center

I came up with a pure css solution! It's css3 though, which means ie8 or lower is not supported, but other than this it's tested and working on ios, android, ie9+, chrome, firefox, desktop safari..

I am using the following css:

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

Here is a fiddle.
http://codepen.io/anon/pen/Hiskj

..selecting this as the correct answer since there's no extra heavy javascript that brings the browser to its knees in case of more than one modals.

How Can I Put Bootstrap Modal in Horizontally center?

your current code in jsfiddle would help out a lot but can you try:

.modal {
width: 600px; //size of modal
margin: 0 auto;
}


option 2:

if you've no issues using flexbox, refer to the answer on this one Flexbox: center horizontally and vertically

Vertically centering modal-lg Bootstrap Modal makes it small

Using this little jQuery function you can do this, if that CSS is causing shrinking issue for your modal box.

Code Snippet

 $(function() {   function reposition() {       var modal = $(this),         dialog = modal.find('.modal-dialog');       modal.css('display', 'block');
       // Dividing by two centers the modal exactly, but dividing by three        // or four works better for larger screens.       dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));       dialog.css("margin-left", Math.max(0, ($(window).width() - dialog.width()) / 2));     }     // Reposition when a modal is shown   $('.modal').on('show.bs.modal', reposition);   // Reposition when the window is resized   $(window).on('resize', function() {     $('.modal:visible').each(reposition);   }); });

.center {  margin-top: 50px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="center">  <button data-toggle="modal" data-target="#result-details-modal" class="btn btn-primary center-block">Click Me</button></div>
<div class="modal fade" id="result-details-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-dialog modal-lg" role="document">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-label="Close">          <span aria-hidden="true">×</span>        </button>        <h4 id="result-details-title" class="modal-title"></h4>      </div>      <div class="modal-body">        ...      </div>      <div class="modal-footer">        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>        <button type="button" class="btn btn-primary">Save changes</button>      </div>    </div>  </div></div>