css设置文字上下居中，一行文字居中，两行或多行文字同样居中,附带效果图

附图:

1. 利用Flex布局实现

demo.html

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

style.css

 1 .demo {
 2         width: 120px;
 3         height: 200px;
 4         border: 1px solid red;
 5         /*line-height: 25px;*/
 6         font-size: 12px;
 7       }
 8       .demo-flex{
 9         display: flex;
10         align-items: center;
11         justify-content: center;
12         flex-direction: column;
13       }

2. 利用属性 line-height

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

style.css

1 #box {
2       width: 200px;
3       height: 120px;
4       border: 1px solid red;
5       text-align: center;
6  }
7 #box span {
8       line-height: 120px;
9 }

注意:　这个方法只适用于 单行文本

3. 利用position 定位来实现

4. 利用 vertical-align 来实现

原文地址：https://www.cnblogs.com/gaoht/p/9132612.html