HTML对于元素水平垂直居中的探讨

我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。

到现在为止，探讨了很多种方法。

HTML：

 
 XML/HTML Code  复制内容到剪贴板 

 
       <  body  >       
            <  div     class  =  "maxbox"  >      
                <  div     class  =  "minbox align-center"  >  </  div  >      
            </  div  >      
        </  body  >      
          
 


效果图（下面几种方法效果图一样）：
 
 第一种： CSS绝对定位  
主要利用绝对定位，再用margin调整到中间位置。
父元素：
 
 CSS Code  复制内容到剪贴板 

 
       .maxbox{      
            position  :   relative  ;     
            width  :   500px  ;     
            height  :   500px  ;     
            margin  :   5px  ;     
          box-shadow:   1px     1px     1px   rgba(0, 0, 0, 0.8), -  1px   -  1px     1px   rgba(0, 0, 0, 0.8);     
      }     
          
 


子元素：
 
 CSS Code  复制内容到剪贴板 

 
       .minbox{      
            width  :   200px  ;     
            height  :   200px  ;     
          box-shadow:   1px     1px     1px   rgba(0, 0, 0, 0.8), -  1px   -  1px     1px   rgba(0, 0, 0, 0.8);     
      }    
 


水平垂直居中对齐：
 
 CSS Code  复制内容到剪贴板 

 
       .align-  center  {      
            position  :   absolute  ;     
            left  : 50%;     
            top  : 50%;     
            margin-left  : -  100px  ;     /*width/-2*/      
            margin-top  : -  100px  ;      /*height/-2*/      
      }     
 


 第二种： CSS绝对定位 + Javascript/JQuery  
主要利用绝对定位，再用Javascript/JQuery调整到中间位置。相比第一种方法，此方法提高了class的灵活性。
父元素：
 
 CSS Code  复制内容到剪贴板 

 
       .maxbox{      
            position  :   relative  ;     
            width  :   500px  ;     
            height  :   500px  ;     
            margin  :   5px  ;     
          box-shadow:   1px     1px     1px   rgba(0, 0, 0, 0.8), -  1px   -  1px     1px   rgba(0, 0, 0, 0.8);     
      }     
          
 


子元素：
 
 CSS Code  复制内容到剪贴板 

 
       .minbox{      
            width  :   200px  ;     
            height  :   200px  ;     
          box-shadow:   1px     1px     1px   rgba(0, 0, 0, 0.8), -  1px   -  1px     1px   rgba(0, 0, 0, 0.8);     
      }    
 


水平垂直居中对齐：
 
 CSS Code  复制内容到剪贴板 

 
       .align-  center  {      
            position  :   absolute  ;     
            left  : 50%;     
            top  : 50%;     
      }     
          
 


JQuery：
 
 JavaScript Code  复制内容到剪贴板 

 
       $(  function  (){      
          $(  ".align-center"  ).css(     
              {     
                    "margin-left"  : ($(  ".align-center"  ).width()/-2),     
                    "margin-top"  : ($(  ".align-center"  ).height()/-2)     
              }     
          );     
      });     
          
 


 第三种： CSS3绝对定位 + 位移  
使用绝对定位与CSS3的 transform: translate同样也可以达到效果。
父元素：
 
 CSS Code  复制内容到剪贴板 

 
       .maxbox{      
            position  :   relative  ;     
            width  :   500px  ;     
            height  :   500px  ;     
            margin  :   5px  ;     
          box-shadow:   1px     1px     1px   rgba(0, 0, 0, 0.8), -  1px   -  1px     1px   rgba(0, 0, 0, 0.8);     
      }     
          
 


子元素：
 
 CSS Code  复制内容到剪贴板 

 
       .minbox{      
            width  :   200px  ;     
            height  :   200px  ;     
          box-shadow:   1px     1px     1px   rgba(0, 0, 0, 0.8), -  1px   -  1px     1px   rgba(0, 0, 0, 0.8);     
      }     
          
 


水平垂直居中对齐：
 
 CSS Code  复制内容到剪贴板 

 
       .align-  center  {      
            position  :   absolute  ;     
            top  : 50%;     
            left  : 50%;     
          -webkit-transform: translate(-50%, -50%);     
             -moz-transform: translate(-50%, -50%);     
                  transform: translate(-50%, -50%);          /*向左向上位移*/      
      }     
          
 


 第四种： Flexbox: [伸缩布局盒模型]  
要让元素水平垂直，对于Flexbox模型来说太容易了。
这里得改变一下HTML：
 
 XML/HTML Code  复制内容到剪贴板 

 
       <  div     class  =  "maxbox align-center"  >       
            <  div     class  =  "minbox"  >  </  div  >      
        </  div  >      
          
 


父元素：
 
 CSS Code  复制内容到剪贴板 

 
       .maxbox{      
            position  :   relative  ;     
            width  :   500px  ;     
            height  :   500px  ;     
            margin  :   5px  ;     
          box-shadow:   1px     1px     1px   rgba(0, 0, 0, 0.8), -  1px   -  1px     1px   rgba(0, 0, 0, 0.8);     
      }     
          
 


子元素：
 
 C# Code  复制内容到剪贴板 

 
       .minbox{      
          width: 200px;     
          height: 200px;     
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);     
      }    
 


水平垂直居中对齐：
 
 CSS Code  复制内容到剪贴板 

 
       .align-  center  {      
            display  : flex;     
            display  : -webkit-flex;         /*兼容问题*/      
            justify  -  content  :   center  ;     
          align-items:   center  ;      
      }     
 


几种方法的比较：
第一种CSS绝对定位margin调整，兼容性很好但是欠缺灵活性。如果有很多box里需要水平垂直居中，因其width，height不同而需要写不同的 .align-center 。
第二种使用脚本语言，兼容性很好且弥补了第一种的缺点。不因width，height的改变而影响水平垂直居中的效果。
第三种使用CSS3的一些新的属性，兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好，不因width，height的改变而影响水平垂直居中的效果。
使用Flexbox模型，兼容Firefox、Opera 和 Chrome，IE全军覆没。也是不因width，height的改变而影响水平垂直居中的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助。

      
查看更多关于HTML对于元素水平垂直居中的探讨的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did37591