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標準，如今的網頁已經不止侷限於過去的那種「印刷式」排版，弄個區塊垂直居中竟然還要搞得這麼麻煩，搞那麼多動畫不如搞點這種實際的。