css不定高使元素水平垂直居中

父元素高度不定，子元素水平垂直居中
html

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

方法一：
css

.parent{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}

此方法可用于场景：div.parent高度一定，子元素未知宽高而需要垂直水平居中的情况。
法二：
html

<div class="parent">
    <img src="http://resource-jxq.jereh-network.com/11754/16011510514078_0.jpg" alt=""/>
    <div class="child">
        <div>123456</div>
    </div>
</div>

css

.parent {
            width:618px;
            position:relative;
        }
        .parent .child{
            height:100%;
            position:absolute;
            top:0;
            left:0;
            width:100%;
        }
        .parent .child>div{
            position:absolute;
            top:0;
            left:0;
            bottom: 0;
            right: 0;
            margin: auto;
            width:100px;
            height:100px;
            background: #db2312;
        }

此方法可用于场景：div.parent 高度根据图片比例而定，子元素垂直水平居中。
另外补充子元素已知宽高的设置垂直水平居中的一种方法：

.parent{
     position: relative;
     height:300px;
     width: 300px;
     background: #FD0C70;
}
.parent .child{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     background: #ffffff;
     width: 100px;
     height: 100px;
}

工作带这个点儿有点饿了，晕乎晕乎的，还被自己删了一次，也不晓得自己写的啥，等我下次不饿的时候来检查一下写好了没……