bootstrap模态框垂直居中

好久没有写东西了，以前想写一些移动端的东西之后补上吧，移动端发展仍是蛮快的，回正题。

由于最近在弄一个系统，系统中引用了bootstrap，发现模态框垂直不居中，遂搜索了一下，也都试了一下，无非都是在js上作的修改，并且都还不完善，好比动态的区检测文档高度与模态框自身的高度，而后赋给模态框margin-top值。

这样作倒也不可厚非，但是须要作的判断会多一点，好比——一、模态框过高，超过屏幕；二、浏览器窗口缩放，模态框的位置变更问题。

下面开始动手 ↓

 

-------start--------

在模态框内插入一个“二级”的div层

 1 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel">
 2     <div><!--新插入的div包裹层-->
 3       <div class="modal-dialog" role="document">
 4         <div class="modal-content">
 5           <div class="modal-header">
 6             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 7             <h4 class="modal-title" id="myModalLabel">标题</h4>
 8           </div>
 9           <div class="modal-body">
10               <!--主体内容-->
11           </div>
12           <div class="modal-footer">
13             <button type="button" class="btn btn-green">肯定</button>
14             <button type="button" class="btn btn-gray" data-dismiss="modal">取消</button>
15           </div>
16         </div>
17       </div>
18     </div>
19 </div>

后面的按钮不用管，是我自定义的class，这里只添加了一个div层没有作class或者id标记，这个能够自定义。

而后，在bootstrap.css里面追加以下代码，这里用到的要点是display:table;和display:table-cell;

我试了不少种布局方式，目前为止，这种最好用，其实还有一种方式是display:inline-block;不过那种方式须要依托一点js，毕竟line-height和height的100%不是一个概念，达不到占比全屏的效果，只能依托一点js，若是有人有更好的方案，不须要添加div代码就能够完成的是最好的——我以为。

 1 .modal>div{/* 追加此行 */
 2   display:table;
 3   width:100%;
 4   height:100%;
 5 }
 6 
 7 .modal-dialog {
 8   /* 略去展现原有内容，此处只显示追加内容 */
 9   display:table-cell;
10   vertical-align:middle;
11 }
12 
13 .modal-content {
14   /* 略去展现原有内容，此处只显示追加内容 */
15   display:block;
16   width: 500px;
17   margin:0 auto;
18 }

这里我定义了.modal-content的宽度500和margin居中，同时去掉了下面这里的宽度和margin居中，固然，这个是自由定义的，能够不这样作，也能达到效果。

这个时候，模态框就能居中，而且能够随着浏览器窗口大小来调整该走的位置了。

 

--------end--------

 

虽然在我看到unsemantic的栅格化后，鄙视了一段时间bootstrap栅格化的冗余，但此次也不得不佩服bootstrap在模态框上将遮罩fixed的聪明，模态框居中和上下位置都是依靠css来完成的，使得样式和结构的尽可能分离。

以这个理念，咱们对bootstrap模态框垂直居中，最好也用纯css的方式，既能保证bootstrap的“纯洁性”，又能使得模态框可以“自适应”的去展现，向左右margin:0 auto;同样方便。

 

顺便再吐槽一下w3c标准，如今的网页已经不止局限于过去的那种“印刷式”排版，弄个区块垂直居中竟然还要搞得这么麻烦，搞那么多动画不如搞点这种实际的。