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

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

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

下面开始动手 ↓

 

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

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

1 
     
       2     
      
        3       
       
         4         
        
          5           
         
           6             
          × 7             
          
标题
 8           
         
 9           
         
          10               
          11           
         
12           
         
          13             
          确定14             
          取消15           
         
16         
        
17       
       
18     
      
19 
     

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