bootstrap 3 Modal Dialog 上下左右居中

html code:

div id="confirm-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

 

div class="modal_wrapper" >

div class="modal-dialog">

div class="modal-content">

div class="modal-header">

button type="button" class="close" data-dismiss="modal" aria-hidden="true">× /button>

h4 class="modal-title">Confirm /h4>

/div>

div class="modal-body">

 

/div>

div class="modal-footer">

button type="button" class="btn btn-default" data-dismiss="modal" id="confirm-dialog-button-left">Close /button>

button type="button" class="btn btn-primary" id="confirm-dialog-button-right">Cancel /button>

/div>

/div>

/div>

/div>

/div>

 css:

.modal{ 

 width: 100%; 

 position: fixed; 

 text-align: center; 

 margin: 0px auto; 

 top: 0px; left: 0px; 

 bottom: 0px; 

 right: 0px; 

 z-index: 1050; 

 } 

 .modal_wrapper{ 

 display: table; 

 overflow: auto; 

 overflow-y: scroll; 

 height: 100%; 

 -webkit-overflow-scrolling: touch; 

 outline: 0; 

 text-align: center; 

 margin: 0px auto; } 

 .modal-dialog{ 

 margin-top: 0px; 

 display: table-cell; 

 vertical-align: middle; 

 margin: 0px 20px; }

如果要去掉渐变效果，可以使用下面样式

.modal.fade .modal-dialog { 

 transform: translate(0, 0%) !important; 

 -ms-transform: translate(0, 0%) !important; 

 -webkit-transform: translate(0, 0%) !important; }

如果在bootstrap3(只是在v3.0.3测试过)下载的文档中JavaScript插件 · Bootstrap.html原文件中修改模态框，实现上下居中效果，只需要在本页面添加下面代码测试：

css样式：

    .modal_wrapper{

      display: table;

        height: 100%;

          margin: 0px auto;

    }

    .modal-dialog{

     display: table-cell;

           vertical-align: middle;

    }

html code:

......

div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

      div class="modal_wrapper"> 如果在自己的项目中使用时，可以直接将这个modal_wrapper样式 放到 父节点div中的class="modal fade modal_wrapper"

      div class="modal-dialog" id="my-modal-dialog">

        div class="modal-content">

          div class="modal-header">

 

......