图片，也就是img标签，行内元素；div，块级元素。
有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示（当然 ，这里我们抛开表格布局不谈，因为表格可以让内容自动垂直居中）
1. 对于图片，如下所示：
.container{ height:350px; border:1px solid #DDDDDD; text-align: center; line-height:350px; } .container img{ vertical-align: middle; max-height: 350px; max-width:350px; }即可让它自动垂直居中了，至于个中原理，
text-align: center;让子元素横向居中显示，这个大家都知道，
vertical-align: middle;让行内元素自身纵向居中显示，但是有了这个属性就一定能垂直居中了吗？
答案是否定的，相信大多数童鞋都在这碰过壁了，认为明明设置了纵向居中，为什么不生效？ 我们必须在父容器上加上
line-height:350px;
设置父容器的行高才行，这两个属性缺一不可。
2. 对于div
对于div的居中，我之前一向用的
{
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
height:100px;
width:200px;
}
转载还请注明出处哦，谢谢各位！^_^~
这种方式来实现，然而最近我发现了另一种方式似乎更优雅一些
{
position:absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
height:100px;
width:200px;
}
你试一下，看看是不是很神奇？它在所有现代浏览器上测试通过并且兼容IE7+浏览器。