CSS元素垂直居中，未知高度该如何处理？

1.行内本文元素

html部分：

    行内元素垂直居中


css部分:
/*公用*/
body,div{
    margin: 0;
}

/*1.行内文本元素*/
.container1{
    background: beige;
}
.container1 span{
    display: inline-block;
    padding-top: 20px;
    padding-bottom: 20px;
}

*行内文本元素，必须设置display:inline-block，padding值才生效

.container2{
    margin-top: 10px;
    background: beige;
}
.container2 span{
    height: 40px;
    line-height: 40px;
}

*若不设置其padding属性，那么设置其height值 与 line-height值相等同样可达到效果

2.多行文本元素

.container3{
    margin-top: 10px;
    background: beige;
}
.container3 span{
    padding-top: 20px;
    padding-bottom: 20px;
    /*若padding无效，设置display:table-cell就有效了*/
    display: table-cell;
}

3.为文本添加幽灵元素

.container4{
    margin-top: 10px;
    background: beige;
    position: relative;
    height: 100px;
}
.container4::before{
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.container4 span{
    display: inline-block;
    vertical-align: middle;
}

*此法必须设置父元素固定高度

4.已知块级元素高度

.container5{
    margin-top: 10px;
    background: beige;
    position: relative;
    height: 200px;
}
.container5 .inner5{
    background: darkorange;
    width: 100%;
    height: 100px;
    position: absolute;
    top:50%;
    margin-top: -50px;
}

5.未知块级元素高度

html部分：

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci animi corporis, cum dolor doloribus esse excepturi explicabo fugiat illo mollitia nam quo repellat reprehenderit sed ullam veniam veritatis voluptatibus.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dignissimos ducimus ex, exercitationem ipsa minus neque. Aliquam aperiam, dolorem est incidunt iste molestiae non, officiis placeat quaerat sequi sit tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci animi corporis, cum dolor doloribus esse excepturi explicabo fugiat illo mollitia nam quo repellat reprehenderit sed ullam veniam veritatis voluptatibus.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dignissimos ducimus ex, exercitationem ipsa minus neque. Aliquam aperiam, dolorem est incidunt iste molestiae non, officiis placeat quaerat sequi sit tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci animi corporis, cum dolor doloribus esse excepturi explicabo fugiat illo mollitia nam quo repellat reprehenderit sed ullam veniam veritatis voluptatibus.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dignissimos ducimus ex, exercitationem ipsa minus neque. Aliquam aperiam, dolorem est incidunt iste molestiae non, officiis placeat quaerat sequi sit tempora.
    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur blanditiis, culpa delectus dolorem harum ipsa itaque magni minus molestiae nam, necessitatibus non officiis, optio porro qui tenetur vitae voluptatibus! Reprehenderit.
    

css部分：
.container6{
    margin-top: 10px;
    background: beige;
    position: relative;
}
.container6 .inner6{
    background: darkorange;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

*此法通用于父子元素均为未知高度，demo中为了有用文字撑开父子元素的高度

6.CSS3新特性flexbox

html部分：

    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur blanditiis, culpa delectus dolorem harum ipsa itaque magni minus molestiae nam, necessitatibus non officiis, optio porro qui tenetur vitae voluptatibus! Reprehenderit.
    

css部分：
.container7{
    margin-top: 10px;
    background: beige;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.container7 .inner7{
    background: darkorange;
    width: 100%;
}