水平垂直居中问题解法

最近在项目中老是遇到水平垂直居中的问题，由于大部分都是按照设计稿定稿后来实现的，所以基本都是确定宽高的。这里，我将所有解决方案整理如下：

子元素均指需要居中的元素

• 长宽确定时的水平和垂直居中

• 长宽不确定的水平和垂直居中

  • 水平居中
    
    • 方法一
      

      父元素：text-align: center; //此属性针对文字或图像，所以子元素需要对应设置display属性
      子元素：display: inline-block;

    • 方法二
      子元素：display: table;margin: 0 auto;//margin只对块级元素生效

  • 垂直居中

    • 方法一：

      父元素：display: table;
      子元素：display：table-cell；vertical-align：middle；//定义行内元素的基线相对于该元素所在行的基线的垂直对齐

    • 方法二：

      父元素: :after{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}
      子元素: display: inline-block;vertical-align: middle;

    • 方法三：

      父元素：font-size:0;//注意这里是去除文字间隔，放在内容宽度为100%时挤出换行
      :after,父元素的下一级子元素(span){display:inline-block;*display:inline;*zoom:1;width:0;height:100%;vertical-align:middle;}
      父元素: :after{content:'';}
      子元素:{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;font-size:16px;}

    • 方法四：

      父元素：position: relative;
      子元素：position:absolute;top:50%;left:50%;-webkit-transform-origin:50% 50%;-webkit-transform:translate3d(-50%,-50%,0)；

PS: version 1.0 添加于 2016.7.14，其余稍后添加