讓div等塊級元素水平以及垂直居中的解決辦法

阿豪聊乾貨發表於2016-05-14

一、背景

　　我們在設計頁面的時候，經常要把div等塊級元素居中顯示，而且是相對頁面視窗水平和垂直方向居中顯示，如讓登入視窗居中顯示。我們傳統解決的辦法是用純CSS來讓div等塊級元素居中。在本文中，我將給大家講述如何用CSS和jQuery兩種方法讓div等塊級元素水平和垂直居中。

二、解決辦法

1.CSS讓div等塊級元素水平居中

　原理：讓一個div等塊級元素水平居中，直接用CSS就可以做到。只要設定了div等塊級元素的寬度，然後使用margin設定邊距0 auto，CSS自動算出左右邊距，使得div等塊級元素居中。

　CSS程式碼：

.mycss{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
}

但是如果要使div等塊級元素垂直方向也居中，恐怕CSS需要修改了。

2.CSS讓一行內容垂直居中顯示

　原理：當我們設定該行元素的高度和行高相同時，CSS會讓它自動垂直居中顯示。

　CSS程式碼：

  .mycss{ 
     height:200px; 
     line-height:20px; 
}

3.讓div等塊級元素水平和垂直都居中，即永遠處於螢幕的正中央，當我們做如登入塊時非常有用！

　實現一、原理：要讓div等塊級元素水平和垂直居中，必需知道該div等塊級元素的寬度和高度，然後設定位置為絕對位置，距離頁面視窗左邊框和上邊框的距離設定為50%，這個50%就是指頁面視窗的寬度和高度的50%，最後將該div等塊級元素分別左移和上移，左移和上移的大小就是該div等塊級元素寬度和高度的一半。

   CSS程式碼：

.mycss{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
}

該方法使用普遍，但是前提是必需設定div等塊級元素的寬度和高度。如果當頁面div等塊級元素寬度和高度是動態的，比方說需要彈出一個div等塊級元素元素層並且要居中顯示，div等塊級元素的內容是動態的，所以寬度和高度也是動態的，這時需要用jQuery可以解決居中。

   實現二原理：利用CSS的margin設定為auto讓瀏覽器自己幫我們水平和垂直居中。

   CSS程式碼：

.mycss{
    position: absolute;
    left: 0px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 200px;
    width: 300px;
}

4.jQuery實現水平和垂直居中

　原理：jQuery實現水平和垂直居中的原理就是通過jQuery設定div等塊級元素的CSS，獲取div等塊級元素的左、上的邊距偏移量，邊距偏移量的演算法就是用頁面視窗 的寬度減去該div等塊級元素的寬度，得到的值再除以2即左偏移量，右偏移量演算法相同。注意div等塊級元素的CSS設定要在resize()方法中完成，就是每次改變視窗大 小時，都要執行設定div等塊級元素的CSS。

　jquery程式碼：

$(window).resize(function(){ 
    $(".myblock").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".myblock").outerWidth())/2, 
        top: ($(window).height() - $(".myblock").outerHeight())/2 
    });        
});

此外在頁面載入時，就需要呼叫resize()方法

$(function(){ 
    $(window).resize(); 
});

此方法的好處就是不需要知道div等塊級元素的具體寬度和高度大小，直接用jQuery就可以實現水平和垂直居中，而且相容各瀏覽器，這個方法在很多的彈出層效果中應用。

 tips:在頁面的外面建一個table，設定高度為100%，然後設定td垂直居中顯示，把頁面套進去就OK拉！

相關文章