I am having problems positioning the modal window in the center of the window. It is showing the position in the right side.What am I missing, this appears to be a CSS problem that I am unable to solve? Thanks for your suggestions! ``` × I am a modal window, and no one can beat me! This is a test modal! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, omnis, sunt illum et minima facilis rerum eaque ullam quasi aperiam soluta beatae vero atque pariatur ab ad…

Bootstrap 3 Modal Position

css, html, modal-dialog, twitter-bootstrap

Solution

@media screen and (min-width: 768px) {
    .modal-dialog {
        left: 50%;
        right: auto;
        width: 624px;
    }
}

If you want a set window on a center you must use this style:

.modal-dialog{
   position: absolute;
   left: 50%;
   /* now you must set a margin left under zero - value is a half width your window */
   margin-left: -312px;
   /* this same situation is with height - example */
   height: 500px;
   top: 50%;
   margin-top: -250px;
}

Problem

I am having problems positioning the modal window in the center of the window. It is showing the position in the right side.What am I missing, this appears to be a CSS problem that I am unable to solve? Thanks for your suggestions! ``` <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">I am a modal window, and no one can beat me!</h4> </div> <div class="modal-body">  <div class="row"> <div class="col-md-3"> <img src="images/icons/dynamite.svg" alt="" /> </div> <div class="col-md-9"> <p class="lead">This is a test modal!</p> </div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, omnis, sunt illum et minima facilis rerum eaque ullam quasi aperiam soluta beatae vero atque pariatur ab ad temporibus accusamus necessitatibus.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close Window</button> </div> </div>  </div>  </div> ``` And the CSS: ``` .modal-backdrop { z-index: 1030; background-color: #243342; } .modal-backdrop.in { opacity: .95; filter: alpha(opacity=95); } .modal { z-index: 1040; } .modal-dialog { z-index: 1050; } .modal-content { width: 624px; background-color: #f9fafb; border: 2px solid #ebedef; border-radius: 7px; -webkit-background-clip: border-box; -moz-background-clip: border-box; background-clip: border-box; -webkit-box-shadow: -14px 14px 0 0 rgba(0,0,0,0.35); box-shadow: -14px 14px 0 0 rgba(0,0,0,0.35); } @media (max-width: 767px) { .modal-content { width: auto; } } @media (max-width: 480px) { .modal-content { -webkit-box-shadow: none; box-shadow: none; } } .modal-header { padding: 17px 19px 15px 24px; border-bottom: 1px solid #ebedef; } .modal-header .close { margin: 5px 0 0; padding: 0; font-size: 18px; line-height: 1; color: #34495e; } .modal-title { margin: 0; font-size: 24px; line-height: 30px; } .modal-body { padding: 20px 24px; } .modal-body p { font-size: 16px; line-height: 1.625; } .modal-footer { padding: 19px 22px 20px; margin-top: 0; background-color: #ebedef; border-top: none; border-radius: 0 0 7px 7px; } .modal-footer .btn + .btn { margin-left: 12px; } @media (max-width: 480px) { .modal-footer .btn { display: block; min-width: auto; margin-bottom: 15px; } .modal-footer .btn:last-child { margin-bottom: 0; } .modal-footer .btn + .btn { margin-left: 0; } } @media screen and (min-width: 768px) { .modal-dialog { left: 50%; right: auto; width: 624px; } } ```

Original source