未知宽高元素垂直水平居中方法汇总

本文只摘录个人认为比较简单易懂，应用比较全面的方法，至于老弱残的IE 5，6，7 不在考虑范围

// 基本样式与html结构

.parent{
    //width:200px;
    // height:800px;
    background:#000;
}

<div class="parent">
  <div class="child" ></div>
</div>

1. flex 布局（new）

优点：设置简单，适合移动端使用
缺点：不支持老旧版本的浏览器，如Android 4.4 以下（鉴于目前市面上基本没有这么低级的Android版本了，缺点可忽略）

.parent{
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .child{
 }

2. flex 布局（old）

优点：基本能满足移动端需求，相对新 flex 布局浏览器支持度高
缺点：子元素必须是块级的元素

 .parent{
    display: -webkit-box;
    display: box;
    -webkit-box-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    box-align: center;
 }
 .child{
 }

3 table-cell

优点：兼容 IE8 及以上，内容溢出会将父元素撑开，父元素不设置宽高会自动紧贴
缺点：父元素不支持margin属性，子元素不能是块级元素

.parent{
    display:table-cell;
    text-align: center;
    vertical-align: middle;
 }
 .child{
    display:inline-block;
 }

4. position: absolute + margin: auto

优点：兼容 IE8 及以上
缺点：父元素必须声明高度

.parent{
    position:relative;
}
.child{
    margin: auto;  
    position: absolute;  
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

5. position: absolute + translate

优点：代码量少
缺点：IE9以下，不支持transform属性的浏览器无法使用，父元素必须声明高度，可能干扰其他transform效果，某些情况下会出现文本或元素边界渲染模糊的现象

.parent{
    position: relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}