1.利用绝对定位

            
                                     
     
      垂直水平居中
     
    

top与left设为50%，margin-left为宽度一半的负值，margin-top为高度一半的负值

此方法最常见，但仅仅适用于已知宽高的情况下。

 

2.绝对定位结合transform

            
                                     
     
      垂直水平居中
     
    

可在未知宽高时使用，但在IE8及以前的浏览器内不支持，且内部文本可能因为移动而稍显模糊，这是因为transform对象的宽高不是偶数，50%位移后产生了小数。

 

3.利用flex

            
                                     
     
            
      
       垂直水平居中
      
        
     
    

IE11以下不支持justify-content、align-items等属性

 

4.利用ifc布局，即空的img或者伪元素

            
                                     
     
            
      
       垂直水平居中
      
        
     
    

5.利用calc

根据雅虎的35个前端优化法则，并不提倡使用calc，略过。