一、首先是喜闻乐见的position方法，经典且万能，用法如下：

1 父元素{ 2     position:relative; 3 } 4 子元素{ 5     position:absolute; 6     top:50%; 7     left:50%; 8     margin-top:/*该元素height*0.5的负值*/; 9     margin-left:/*该元素width*0.5的负值*/;10 }

 　　不需要水平居中可以去掉left和margin-left。

 划重点：需要父元素和子元素都定义宽高，自适应是不可能自适应的，这辈子都不可能自适应的。

 

 

二、 display:table-cell能够使大小不固定的元素实现垂直居中布局，先来一发用法:

 

父元素{    display:table-cell;    vertical-align:middle;}子元素{    vertical-align:middle;}

 

　　table-cell布局除了常见的实现不同宽高的图片垂直居中，还能做到自适应两栏布局（评论区等）：

　　代码如下：

HTML部分：

     
        
      
            
               
      
        
      
            
       
文字部分 
        
      
    
     

CSS部分：

　

　　另外table-cell还能自动使多个子元素等宽分布，不需要自己计算宽度：

　　代码如下：

ul{
               list-style-type:none;            display: table;            width: 250px;            padding: 0;        }        li{
               display: table-cell;            text-align: center;        }        li+li{
              border-left: 1px solid #000;        }

 

划重点：1、IE6/7不支持; 2、table-cell不支持margin属性（但支持padding）,就很僵硬; 3、尽量不要和浮动/定位同时用，会破坏它的css属性。

 

 

三、如果你用ie我们就做不成朋友之弹性布局神器flex-box，用法如下：

父元素{
       display:flex /* 行内元素用inline-flex */    align-items:center;/*当主轴为水平方向(默认)*/ }

  原理是使flex-box的子元素（伸缩项目）沿着侧轴方向（当默认flex-direction:row时，侧轴就是垂直方向）居中对齐。

  使用flex-wrap，还可以使伸缩容器里的内容折叠显示：

  当调整视口宽度缩小到480px时：

  代码如下：

    
                 
     
        
      
超好吃的
        
      
♥
        
      
麻辣小龙虾
    
     

  浏览器兼容情况：

低版本浏览器兼容性解决：

 

display: -moz-box; /* 低版本firefox */

display:-webkit-box;/* IOS 6-,safari 3.1-6 */

------

display: -ms-flexbox; /* IE10  */

display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex; /* 较低版本firefox */

display: flex; /*IE11,  Chrome29+, FireFox 20+ */

参考：

  兼容：

https://zhuanlan.zhihu.com/p/21640023

http://www.cnblogs.com/iriszhang/p/6102524.html

  flex-box的兼容性bug解决：

http://www.w3cplus.com/css3/normalizing-cross-browser-flexbox-bugs.html