标签：
很久没有写东西了，之前想写一些移动端的东西以后补上吧，移动端发展还是蛮快的，回正题。
因为最近在弄一个系统，系统中引用了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">×</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标准，现在的网页已经不止局限于过去的那种“印刷式”排版，弄个区块垂直居中居然还要搞得这么麻烦，搞那么多动画不如搞点这种实际的。
标签：
原文地址：http://www.cnblogs.com/mel-walle/p/4747423.html
