bootstrap模态框垂直居中

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

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

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

下面开始动手 ↓

 

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

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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel">
    <div><!--新插入的div包裹层-->
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">标题</h4>
          </div>
          <div class="modal-body">
              <!--主体内容-->
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-green">确定</button>
            <button type="button" class="btn btn-gray" data-dismiss="modal">取消</button>
          </div>
        </div>
      </div>
    </div>
</div>

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

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

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

.modal>div{/* 追加此行 */
  display:table;
  width:100%;
  height:100%;
}

.modal-dialog {
  /* 略去展示原有内容，此处只显示追加内容 */
  display:table-cell;
  vertical-align:middle;
}

.modal-content {
  /* 略去展示原有内容，此处只显示追加内容 */
  display:block;
  width: 500px;
  margin:0 auto;
}

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

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

 

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

 

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

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

 

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