css居中几种方式

前端经常遇到对div进行水平垂直居中问题，网上也有很多解决方式，但是我们需要根据不同的前提条件和兼容性等来选择合适的方案

方案1、position+margin:auto （未知元素宽高）

      

        

            
love
        
          

方案2、table-cell （未知元素宽高）

         
        

            
 111 
        

方案3、position+transform(css3存在兼容性问题) （未知元素宽高）

或position+calc()(css3存在兼容性问题) （已知元素宽高）

         .center {
                position: absolute;
                top: calc(50% - 50px);
                left: calc(50% - 50px);
         }

或position+margin （已知元素宽高）

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

方案4、flex布局（低版本浏览器不兼容） （未知元素宽高）

         

        

            
love
        

参考：CSS水平垂直居中常见方法总结