BootStrap dialog 居中的解决方案

背景

接手了一个古董项目，项目不是前后分离，所以页面需要自己做，由于有个需求是需要弹一个dialog,所以参照项目中之前的代码，之前的代码是用的BootStrap3 ，我照猫画虎的做完，发现dialog倒是能弹出来，但是弹的位置很不让人满意，由于本人不怎么懂前端代码，然后网上一通搜，试了很多，没有一个能够解决我的问题。
最后实在没有办法，只能拿出我祖传三百年的大杀器，谷歌搜索。我输入相关英文，第一个就是stackoverflow上的问题，于是按照上面的大神的方法，果然有效，有一说一，真香。

Bootstrap 代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">模板审核</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="tplIdInput">
                <input type="hidden" id="productSystemInput">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">模板编号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="templetNum" value="219350186999808" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商户系统</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="productSystem" value="16bit-lab" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">内容</label>
                        <div class="col-sm-10">
                            <textarea readonly="readonly" class="form-control" id="templetContent" rows="4"> </textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">类型</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="messageType" value="通知" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">运营商</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="partner_select" title="请选择运营商">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">运营商模板Id</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" placeholder="在这里输入运营商模板Id" id='partnerTplIdInput'
                                   aria-describedby="sizing-addon2">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="save()">通过</button>
            </div>
        </div>
    </div>
</div>

解决方法

 .modal-dialog {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width:600px;
            height:500px;
        }

width,height 可以根据实际需要调整

参考

stackoverflow