How to place Boot strap modal in vertically center aligned manner?

问题

Hi I have Bootstrap modal. I am not getting hoe to make vertically center aligned?

 $('#sectionAjaxLoader').modal('show');

  <section class="modal" id="sectionAjaxLoader" data-keyboard="false" data-backdrop="static">
        <img src='../../Images/ajax_loader.gif' alt="Please Wait..." />
    </section>

Any ideas how to implement this?

回答1:

Use like this

.modal {
    text-align: center;
}
.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

Working fiddle

http://jsfiddle.net/52VtD/9057/

回答2:

With css only

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

Demo: See, Another Demo: See

来源：https://stackoverflow.com/questions/26911355/how-to-place-boot-strap-modal-in-vertically-center-aligned-manner