Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)

近期使用ng重构公司的后台管理系统，类似modal这样的组件，再也不用像以前那样先创建再append(而是由状态驱动)；为图方便使用bootstrap的样式和angular-ui的bootstrap组件，然而它的弹出层默认样式是水平居中，垂直方向上并没有；F12之，找到bootstrap.min.css(这里是3.3.5)的相应代码，主要修改以下三个地方，修改后的样子：

第一处(将0改为-50%，相对自身偏移一半)：

.modal.in .modal-dialog{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%)}

第二处(原先是relative)：

.modal-dialog{position:absolute;width:auto;margin:10px auto;left:0;right:0;top:50%}

 第三处：

@media (min-width:768px){.modal-dialog{width:600px}

 此时modal已经可以垂直居中了：

转载于:https://www.cnblogs.com/AidenChen/p/5617463.html