行高
<div> <p> 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777 </p> </div> div:nth-of-type(1) { height: 40px; line-height: 40px; }
优点：兼容性好
缺点：只能用于单行行内内容；要知道高度的值
垂直对齐
<div> <p> 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777 </p> </div> div:nth-of-type(1) { height: 60px; vertical-align: middle; }
优点：兼容性好
缺点：需要添加font-size： 0;才可以完全的垂直居中；
绝对定位
<div> <p> 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777 </p> </div> div:nth-of-type(1) { position: relative; height: 100px; } div:nht-of-type(1) p { position: absolute; top: 50%; transform: translateY(-50%); height: 50px; }
优点：简单;兼容性较好（ie8+）
缺点：脱离文档流
屈
<div> <p> 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777 </p> </div> div:nth-of-type(1) { display: flex; align-items: center; }
优点：大众主流;强大;简单
缺点：PC端兼容性不好，移动端（Android4.0+）
