1.行內本文元素

html部分：
<div class="container1">
    <span>行內元素垂直居中</span>
</div>

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部分：
<div class="container6">
    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.
    <div class="inner6">
        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.
    </div>
</div>
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部分：
<div class="container7">
    <div class="inner7">
        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.
    </div>
</div>
css部分：
.container7{
    margin-top: 10px;
    background: beige;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.container7 .inner7{
    background: darkorange;
    width: 100%;
}