HTML對於元素水平垂直居中的探討_HTML/Xhtml_網頁製作

我們在設計頁面的時候，常常要把DIV居中顯示，而且是相對頁面視窗水平和垂直方向居中顯示，如讓登入視窗居中顯示。

到現在為止，探討了很多種方法。

HTML：

XML/HTML Code複製內容到剪貼簿

1. 身體>  
2.     div class="maxbox">  
3.         div >div>       
div
4. >  
5. body>     
6. 效果圖（下面幾種方法效果圖一樣）：

第一種： CSS絕對定位

主要利用絕對定位，再用margin調整到中間位置。

父元素：

CSS Code

複製內容到剪貼簿

.maxbox{   

1.     position
2. : relative; 🎜>relative; 🎠    
3. width: 500px;       height
4. : 500px;        margin
: 
5. 5px;   5px;        box-shadow: 
6. 1px 1px1px -1px  > rgba(0, 0, 0, 0.8);    }      
7. 子元素：
8. CSS Code複製內容到剪貼簿

.minbox{   

    

width

1. : 200px;  
2.     height: 200px;   
;   
3.     box-shadow: 1px 1px1px
4.  -1px  > rgba(0, 0, 0, 0.8);    }  

   水平垂直居中對齊：

   CSS Code複製內容到剪貼簿

   1. .align-center{   
   2.     position: absolute;   absolute
   3. ;       left
   : 50%;   
   4.     top
   : 50%;   
   5.     margin-left: -100px; /  
   6.     margin-top: -100px /  
   }   
   第二種： CSS絕對定位 Javascript/JQuery

   主要利用絕對定位，再用Javascript/JQuery調整到中間位置。相較於第一種方法，此方法提高了class的靈活性。

   父元素：

   CSS Code

   複製內容到剪貼簿

   1. .maxbox{   
       
   2. position: relative; 🎜>relative; 🎠
       width: 500px;       
   3. height: 500px;        
   4. margin: 5px;   5px;   
   5.     box-shadow: 1px 1px1px -1px  > rgba(0, 0, 0, 0.8);    }      
   子元素：
   CSS Code

   複製內容到剪貼簿
   .minbox{   

       
   1. width: 
   200px
   2. ;       height: 200px
   ;   
   3. ;        box-shadow: 1px 1px
   1px -1px  > rgba(0, 0, 0, 0.8);    }   水平垂直居中對齊： CSS Code複製內容到剪貼簿
   1. .align-center{   
   2.     position: absolute;   absolute
   3. ;       left
   : 50%;   
   4.     top
   : 50%;   
   }   
     

   JQuery：

   JavaScript Code

   複製內容到剪貼簿

   1. $(function(){   
   2.     $(".align-center"
   ).css(   
           {   
   4.             "margin-left": ($(: ($(
   5. /-2),                "margin-top": ($(
   : ($(
   7.         }   
   8.     );   
   9. });   

     

   第三種： CSS3絕對定位 位移

   使用絕對定位與CSS3的 transform: translate同樣也可以達到效果。

   父元素：

   CSS Code

   複製內容到剪貼簿
   2. .maxbox{        position: 
   relative
   3. ; 🎜>relative; 🎠    width
   : 
   4. 500px;       height: 
   500px
   5. ;        margin: 5px
   6. ;   5px;        box-shadow: 1px 1px1px -1px  > rgba(0, 0, 0, 0.8);   
   }   
     

   子元素：

   CSS Code

   複製內容到剪貼簿

   1. .minbox{   
   2.     width: 200px;  
       
   3. height: 200px;   ;   
   4.     box-shadow: 1px 1px1px -1px  > rgba(0, 0, 0, 0.8);    }      
   5. 水平垂直居中對齊：
   6. CSS Code

   複製內容到剪貼簿

   .align-center

   {   

   1.     position: absolute
   2. ;   absolute;       top: 50%;   
   3.     left: 50%;   
   4.     -webkit-transform: translate(-50%, -50%);           -moz-transform: translate(-50%, -50%);   
   5.             transform: translate(-50%, -50%);        
   6. 2
   }   
   7.   
   8. 第四種： Flexbox: [伸縮版面盒模型]
   9. 要讓元素水平垂直，對於Flexbox模型來說太容易了。
   這裡得改一下HTML：

   XML/HTML Code複製內容到剪貼簿

   div 

   class

   1. ="maxbox align-center">       div 
   class
   2.  class class class class class class
    
   3. 類>div>
     

   div

   >

     

      父元素： CSS Code複製內容到剪貼簿

   1. .maxbox{   
   2.     position: relative; 🎜>relative
   3. ; 🎠    width: 500px
   ;  
   4.     height: 500px;   
   5.     margin: 5px;   5px
   ;   
   6.     box-shadow: 1px 1px1px -1px  > rgba(0, 0, 0, 0.8);    }   
     
   8. 子元素：

   C# Code

   複製內容到剪貼簿

   .minbox{   

   1.     width: 200px;   
       height: 200px;   
       box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1 
   3. }  
   水平垂直居中對齊：
   CSS Code

   複製內容到剪貼簿

   .align-center

   {   

   1.     display: flex;   
   2.     display: -webkit-flex;       /？
   3.     justify-content: content
   4. :      align-items: center;     }   
   5. 幾種方法的比較： 第一種CSS絕對定位margin調整，相容性很好但是欠缺彈性。如果有很多box需要水平垂直居中，因其width，height不同而需要寫不同的 .align-center 。 第二種使用腳本語言，相容性很好且彌補了第一種的缺點。不因width，height的改變而影響水平垂直居中的效果。 第三種使用CSS3的一些新的屬性，相容於IE10, Chrome, Firefox, 和 Opera。相容性不太很好，不因width，height的改變而影響水平垂直居中的效果。
   使用Flexbox模型，相容於Firefox、Opera 和 Chrome，IE全軍覆沒。也是不因width，height的改變而影響水平垂直居中的效果。
   6. 以上就是本文的全部內容，希望對大家的學習有所幫助。