一、多行文字垂直居中
1.父元素设置display:table,子元素设置display: table-cell;vertical-align: middle;
.middle-box{
display: table; /*重点*/
height: 300px;border: 1px solid #000;
}
/*重点:table-cell布局*/
.middle-inner{
display: table-cell;
vertical-align:middle;
text-align:center;
height: 200px;
border:1px solid #000;
}
</style>
<body>
<div class="middle-box">
<div class="middle-inner">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style=""><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>
</div>
2.父元素设置display:table-cell, vertical-align:middle;
<style>
*{padding: 0;margin:0;font-size: 12px;}
div{display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle;}
</style>
<div>
<span>测试文字测试文字</span>
</div>
<div>
测试文字测试文字
</div>
<div>
<p>测试文字测试文字</p>
<p>测试文字测试文字</p>
</div>
二、一个元素的垂直居中
https://blog.csdn.net/weixin_41305441/article/details/89886846
三、CSS的inline、block与inline-block
https://segmentfault.com/a/1190000015202771