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

转载于 2017-10-13 09:44:00 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cxx328/p/7659581.html

本文介绍如何通过简单的CSS修改使Bootstrap 3.3.5版本中的模态对话框实现垂直居中效果。具体包括两处CSS样式调整：一是改变模态对话框的位置转换属性；二是将模态对话框的位置属性从相对定位改为绝对定位。

我用的bootstrap版本是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;margin:10px auto;left:0;right:0;top:50%}

转载于:https://www.cnblogs.com/cxx328/p/7659581.html