bootstrap模态框垂直居中

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

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

这样做倒也不可厚非，可是需要做的判断会多一点，比如——1、模态框太高，超过屏幕；2、浏览器窗口缩放，模态框的位置变动问题。

下面开始动手 ↓

-------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标准，现在的网页已经不止局限于过去的那种“印刷式”排版，弄个区块垂直居中居然还要搞得这么麻烦，搞那么多动画不如搞点这种实际的。