CSS实现元素垂直居中若干方法

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");

}