1) 单行文字的垂直居中对齐
把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的,但其实也是有问题的。问题在于height,把line-height设置为您需要的box的大小可以实现单行文字的垂直居中,height是多余的。
代替height,避免ie6/ie7中的haslayout
![](https://dyedd.cn/usr/uploads/2019062107033325.png#mirages-width=934&mirages-height=522&mirages-cdn-type=3)
2) 多行文字的垂直居中
要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体大小有大有小的情况怎么办呢?方法之一就是借助于line-height。
![](https://dyedd.cn/usr/uploads/2019062107013427.png#mirages-width=878&mirages-height=469&mirages-cdn-type=3)
3)图片的垂直居中
消除图片底部间隙(如果不是居中。)
1.图片块状化-无基线对齐
img {display:block;}
2.图片底线对齐
img{vertical-align:bottom;}
3.行高足够小-基线位置上移
.box{line-height:0;}
![](https://dyedd.cn/usr/uploads/2019062106594896.png#mirages-width=880&mirages-height=477&mirages-cdn-type=3)