行高

 

 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777   div:nth-of-type(1) {  height: 40px;  line-height: 40px; }

优点：兼容性好

缺点：只能用于单行行内内容；要知道高度的值

垂直对齐

 

 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777   div:nth-of-type(1) {  height: 60px;  vertical-align: middle; }

优点：兼容性好

缺点：需要添加font-size： 0;才可以完全的垂直居中；

绝对定位

 

 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777   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+）

缺点：脱离文档流

屈

 

 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777   div:nth-of-type(1) {  display: flex;  align-items: center; }

优点：大众主流;强大;简单

缺点：PC端兼容性不好，移动端（Android4.0+）