标签：
CSS如何实现图片上下垂直居中:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
在很多时候需要将图片上下垂直居中，不过没有一个直接了当的属性能够实现此功能。当然实现图片上下垂直居中的方法有多重，下面就简单介绍一下其中的两种。
方法一:
使用margin方式，使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/2。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> div { height:400px; width:400px; border:1px solid red; } div img {margin-top:127px;} </style> </head> <body> <div><img src="mytest/demo/border.jpg" alt="蚂蚁部落"></div> </body> </html>
方式二:
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> div { height:400px; width:400px; border:1px solid red; vertical-align:middle; display:table-cell; } </style> </head> <body> <div><img src="mytest/demo/border.jpg" alt="蚂蚁部落" /></div> </body> </html>
以上代码实现了图片上下垂直居中，不过IE7浏览器并不支持此方式。
实现方式在div中添加了如下代码:
vertical-align:middle;
display:table-cell;
line-height:400px;
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4614
更多内容可以参阅:http://www.softwhy.com/divcss/
标签：
原文地址：http://www.cnblogs.com/nulifendou/p/5047409.html
