关于DIV垂直居中

关于绝对定位来让DIV垂直居中：

1.较为常见的一种方法：利用外补白即margin来实现居中;

        .class{

                   position:absolute;

                   left:50%;

                   top:50%;

                   width:200px;

                   height:200px;

                   margin-left:-100px;

                   margin-top:-100px;

        }

       此方法在于div具有固定的宽度和高度来实现水平垂直居中；

2.若没有固定的高度或者宽度可以通过CSS3属性来设置让DIV水平垂直居中;

       .class{

                 position:absolute;

                 left:50%;

                 top:50%;

                 width:auto;

                 height:auto;

                 tranform:translate(50%,50%);

        }

      此方法在于其兼容性方面，对于IE9以前的版本存在兼容性问题;

3.对于固定宽高也可以通过设置四个方向的绝对定位值来实现水平垂直居中;

         .class{

                  position:absolute;

                  width:200px;

                 height:200px;

                 left:0;

                right:0;

                bottom:0;

                top:0;

               margin:auto;

          }