Bootstrap 3 Modal Position

Question

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">&times;</button>
        <h4 class="modal-title">I am a modal window, and no one can beat me!</h4>
      </div>
      <div class="modal-body">

        <!-- Columns within the modal window -->
        <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>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</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;
    }
}

Cymbre

Answer 1

@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;
} 

Manslaughter

Jake Smith are you really Sheldon from Big Bang? – Aargau

@Hakam Fostok, I want to set dialog positon under some element and set dialog window size, how to do it? – Outfield

This method is not responsive – Treasatreason

Answer 2

.modal-sss-dialog {
    position: absolute;
    margin-left: 200px;
    height: 500px;
    top: 50%;
    margin-top: -250px;
}

Osman

Answer 3

I discover much responsive method:

HTML

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.modal {
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}

Credits to: http://jsfiddle.net/rensdenobel/sRmLV/13/

Treasatreason