全面理解line-height与vertical-align

div{   
    line-height: 100px;   
    width: 100px;   
    text-align: center;   
    border: 1px solid black;   
}   
  
<div>测试文字</div>  

　　[注意]好多地方都写着单行文本垂直居中是将高度和行高设置成一样的值，但高度其实是没有必要设置的。仅仅设置行高就可以，文字在一行中本身就是垂直居中显示扫

【2】图片近似垂直居中

XML/HTML Code复制内容到剪贴板

div{   
    line-height: 200px;   
    text-align: center;   
}   
img{   
    vertical-align: middle;   
}   
<div>  
    <img src="#" alt="#">  
</div>  

　　由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显

　　[注意]IE7浏览器在写块级元素包含行内元素时一定要写成换行写法，而不要写在一行

复制代码//正确1<div> <img src=”#” alt=”#”></div>//正确2<div><img src=”#” alt=”#”><!– 这里要折行或空格 –></div>//错误<div><img src=”#” alt=”#”></div>
【3】图片完全垂直居中

　　在方法2的基础上设置块级元素的font-size为0，则可以设置图片完全垂直居中

复制代码div{ line-height: 200px; text-align: center; font-size: 0;}img{ vertical-align: middle;}
复制代码<div> <img src=”#” alt=”#”></div>
【4】多行文本水平垂直居中

　　由于方法3设置font-size为0的局限性，块级元素里面无法放置文本。方法4主要通过新增元素来实现垂直居中效果，该方法也可用于图片的水平垂直居中

XML/HTML Code复制内容到剪贴板

div{   
    height: 100px;   
    width: 200px;   
    background-color: pink;   
    text-align: center;   
}   
span{   
    display:inline-block;   
    vertical-align: middle;   
    line-height: 20px;   
    width: 100px;