水平居中方法 总结

1.最基本的方式：自动外边距。

要求：居中元素为块元素，且宽度固定，使浏览器自动计算左右边距的大小而达到居中的效果。

适用于：各主流浏览器，包括标准模式下的ie系列。（怪异模式不支持）

div{
margin-left:auto;
margin-right:auto;
或者
margin:0 auto;
}

2.text-align:center方式。

要求:在外层容器使用text-align:center，内层元素须为内联元素，或强制声明了display:inline的块级元素（不能为浮动元素，因为浮动元素始终为块级元素）。

body{
text-align:center;
}

3.定位方式。（同样可用于垂直居中）

要求：使用position:absolute和position:relative，并且需要知道内层元素的大小。

div{
position:relative;
width:100px;
height:100px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}

4.浮动居中元素。

要求：在外层容器中有两个块级元素，外块级元素通过定位的方式将左上角定位于外层容器中点，再设置内部块级元素设置left:-50%。

5.使用背景图片居中显示的方式。

最简单的方式，仅对图片进行居中显示。但是只能显示为背景图片，所以适用范围小。

body{
background:url(1.jpg) center no-repeat;
}