css水平垂直居中方法

居中的问题只要是前端面试，基本上都会问的css问题，高级点的像什么双飞翼布局，圣杯布局，记不住的话百度也很多，但是居中这个问题，至少会两个常见的，总不能啥都百度吧！！

1.display：table-cell方法

 

        

            居中
        
 

1.jpg

注意的是：
如果使用table-cell就不要使用其他的定位了，例如float，position：absolute，如果非要用，那么可以在father上面在加一个父div定义float等属性；设置了table-cell的元素对宽度和高度敏感（在父元素上设置table-row等属性，也会使其不感知height。），对margin值无反应，响应padding属性

附带一个需求：如果想让这个father的div一直垂直在页面中央怎么办，页面怎么缩放都在中间

 

    

          

                        居中
          
      
 

2.display：flex弹性布局

   
    

          

                        居中
          
     

1566293010(1).jpg

注意的是：
display:flex是C3高级的，有点需要兼容性

3. 绝对定位 +margin也是最常用的

    
    

        

            居中
        
    

图略 同上
注意的是：
left.top.bottom.right.margin:auto一个都不能少， margin: auto;作用其实是把div剩余的空隙平均匀了

4.同上 --绝对定位+，但是用的是transform

    
     

        

            居中
        
    

注意的是：
这种方法兼容性依赖translate2d的兼容性

5.绝对定位+margin反向偏移，感觉实用性不是很大

 

    

        居中
    

注意的是：
margin值的设置不能使用百分比，因为margin是基于父元素的宽度来计算百分比的，由于top、left偏移了父对象的50%宽度高度，所以需要利用margin反向偏移居中块的50%宽高
这里的margin具体参数是怎么来的：
margin-left:-(width+padding)/2+'px';
margin-top:-(height+padding)/2+'px';