CSS元素垂直居中一直都是一个让人头疼的问题，这里总结了4种方法，当然通过改变定位可以有6种甚至更多。
1.position配合margin
这个基本可以说是烂大街的方法了，好处就是兼容性好，直接上代码。
.content{
position:absolute;
width:550px;
height:364px;
top:50%;
left:50%;
margin-left:-275px;
margin-top:-182px;
background:url("images/love.jpg");
}
2.position配合margin改进
IE6-9不兼容，使用CSS3函数calc()
.content{
position:absolute;
top: calc(50% -182px); // top移动的距离其实就是(总高度-容器高度)/2，有没有觉得这个思路很酷？
left: calc(50% -275px);
width:550px;
height:364px;
background:url("images/love.jpg");
}
3.position配合transform（对于不定宽高容器同样适用）
同样还是不支持IE6-IE9，因为transform为CSS3新属性。
.content{
position:absolute;
top:50%;
left:50%;
width:550px;
height:364px;
transform:translate(-50%,-50%);
background:url("images/love.jpg");
}
4.flex配合margin （对于不定宽高容器同样适用）
同样还是不支持IE6-IE9，因为flex为CSS3新属性。
body{ //父元素
display:flex;
height:500px;
}
.content{ //子元素
margin:auto;
background:url("images/love.jpg");
}
