这种方法主要使用margin: auto配合元素的width来实现水平居中的效果
Html Markup
<div class=”horizontal”>content</div>
CSS Code:
.horizontal {
width: 200px;
margin: 0 auto;
}
使用上面方法实现元素水平居中一定要让元素满足两个条件：其一，元素需要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都无法让元素达到水平居中的效果。此方法使用水平居中，支持所有浏览器运行，因此他也常用来实现Web页面水平居中的布局效果，如果用在布局，需要注意IE下的效果，换句话说，如果你的Web页面没有明确声明"!DOCTYPE"，那么在IE也会以怪异模式解析你的Web页面，此时上面这种办法将无法让你的页面实现水平居中，但你可以使用下面这种方法解决这个bug。
Html Code:
<div class=”container”> 页面内容。… </div>
CSS Code:
body {
text-align: center;/*实现IE在怪异模式下页面水平居中*/
}
.container {
text-align: left;/*让文本恢复到左对齐*/
width: 960px;/*设置页面总宽度*/
margin: 0 auto;/*使页面水平居中对齐*/
}
方法二：
实现固定宽度的水平居中，我们还可以使用绝对定位配合负的margin来实现，具体代码如下：
Html Markup
<div class=”horizontal”>content</div>
CSS Code:
.horizontal {
width: 960px;
position: absolute;
left: 50%;
margin-left: -480px;/*此值等于“-width/2”*/
}
这种方法有几点需要注意：其一要有一个固定宽度，其二对要居中的元素进行绝对定位，并且“left: 50%”；其三对此元素设置一个负的“margin-left”并且值等于宽度的一半，另外如果元素不是相对于浏览器的话，还需要在其父元素上设置一个相对定位“position: relative”。
方法三：
这种方法主要是针对单行文本居中或者前面介绍的table格式居，主要运用的是text-align:center让元素水平居中
.testH{text-align:center;}
面主要是和大家一起探讨和学习了多种方法让元素实现垂直居中，大家可以在这几种方法上稍做改变就能实现其水平居中，这样就达到了元素水平垂直居中的效果。实现方法很多，而且他们也各有千秋，可以说他们各有各的好，各有各的坏，具体怎么让他们更适合你的实际应用，你可以仔细对比一下，我比较喜欢方法四，简单，兼容性强，只是需要增加一个额外的标签。说了这么多，希望能给需要的朋友有所帮助。
