一、flex

用法

父元素
.parent{
    display:block;
    justify-content:center;
    align-items:center;
}

tips

flex: 1 === flex: 1 1 0%（grow shrink basis）
参考：阮一峰flex详解

二、position

父元素
.parent{
    position:relative;
}
子元素
.children{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
}

tips
可不可以去掉四个方向的0？----不可以
因为margin：auto中，left 和 top的百分比都是相对于宽的。

三、position+margin/transform

父元素
.parent{
    position:relative;
}
子元素
.children{
    position:absolute;
    left:50%;
    top:50%;
    // 已知宽高
    margin-left:-50%;
    margin-top:-50%;
    // 已知/未知宽高
    transform:translate(-50%,-50%)；
}

tips：使用translate可以使用GPU加速，不会引起重绘重排，提高了浏览器性能。
参考：重绘和回流