How Can I Put Bootstrap Modal in Horizontally center?

Question

I have a modal that I resize it.I want large width size of modal and horizontally centered. In addition when I resize it to smaller it's correct.

<style>
    #PopupModel   {width:60%;}

.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*/ 
   
}

</style>

<div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
    <div class="modal-dialog" role="document" >
        <div class="modal-content" >    

            <div class="modal-header">

                <h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>


            </div>
            <div class="modal-body" id="modelResult">
                <br />
            </div>


        </div><!-- /.modal-content -->
        <div class="modal-footer">
            <div class="">
                <button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
                <button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div>

I test some ways but not worked for me .any help ?

Answer 1

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

Answer 2

This may be a tad late, but the simplest way of aligning the modal in the center of your screen is to use the vertical-align: middle; property inherent to inline elements.

Please remove all extra formatting you have added to the basic Bootstrap modal and add the following CSS:

.modal {
    text-align: center;
}

.modal::before {
    content: "";      
    display: inline-block;
    height: 100%;    
    margin-right: -4px;
    vertical-align: middle;
}

.modal-dialog { 
    display: inline-block;  
    text-align: left;   
    vertical-align: middle;
}

Please keep in mind that I am using Bootstrap 3 and the above CSS may or may not work with a Bootstrap 4 modal.

Original solution: http://www.learnsourcecode.com/blogs/align-bootstrap-modal-center-of-screen-vertically