如何将Bootstrap模态放在水平中心？

Question

我有一个我调整大小的模态.我想要大尺寸的模态和水平居中.另外,当我将其调整为较小时,它是正确的.

<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>

我测试了一些方法,但没有为我工作.有什么帮助吗？

Answer 1

您在jsfiddle中的当前代码会有很多帮助,但您可以尝试: .modal { width: 600px; //size of modal margin: 0 auto; }

选项2:

如果你在使用flexbox时没有问题,请参考这个Flexbox上的答案:水平和垂直居中