css文字上下居中，一行文字居中，多行文字同样居中

1. 利用Flex布局实现（单行或多行）

 .demo {
 	width: 120px;
    height: 200px;
    border: 1px solid red;
    /*line-height: 25px;*/
    font-size: 12px;

	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
} 

<div class="demo"><span>孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。</span></div>

2.利用属性 line-height （单行）

#box {
    width: 200px;
    height: 120px;
    border: 1px solid red;
    text-align: center;
}
#box span {
   line-height: 120px;
}

<div id="box">
　　<span>文本上下居中</span>
</div>

3.利用position定位来实现（单行或多行）

.box{
    width: 500px; 
    height: 500px;
    border: 1px solid red;
    text-align: center;
    position: relative;
} 
 定位方法 (一)
.remind {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
 定位方法 (二)
.remind {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto 0;
   height: 0;
}

<div class="box">
    <a class="remind">春宵一刻值千金，花有清香月有阴。歌管楼台声细细，秋千院落夜沉沉。</a>
</div>

4.利用 vertical-align 来实现（单行）

#box {
   width: 200px;
   height: 120px;
   border: 1px solid red;
   text-align: center;
 }
 #box::before {　　　　//  　　伪元素
   content: " ";
   display: inline-block;
   height: 100%;
   width: 1%;
   vertical-align: middle;
 }
#box span {
  vertical-align: middle;
}

<div id="box">
   <span>两个黄鹂鸣翠柳</span>
</div>

5.利用Flex布局来实现（单行或多行）

#box {
   width: 200px;
   height: 120px;
   border: 1px solid red;
   /*text-align: center;*/
   display: flex;
   align-items: center;
   justify-content: center;
}

<div id="box">
   <span>两个黄鹂鸣翠柳</span>
</div>