附图:
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 来实现
css设置文字上下居中，一行文字居中，两行或多行文字同样居中,附带效果图
原文地址：https://www.cnblogs.com/gaoht/p/9132612.html