我们在设计页面的时候，经常要把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的改变而影响水平垂直居中的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助。