元素内的行内元素

在元素上加

text-align:center;

宽度固定的块级元素

在元素上加

width: 宽度值;
margin-left: auto;
margin-right: auto;

或者用绝对定位

position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);

宽度不固定的块级元素

方法1

用display:inline-block。通过以下几个步骤

1. 元素设置text-align:center;
2. 元素设置font-size:0;。这样做是为了去除子元素间的空格的占位
3. 子元素设置display:inline-block;

方法2

需要通过以下几个步骤

1. 让元素的宽度变为所包含元素的内容。可以用浮动或绝对定位。
2. 元素向左移动其父级元素宽度的50%
3. 子元素向左移动其父级元素宽度的50%

例如，有如下的HTML结构

<ul id="no-sure-width-2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

样式为

#no-sure-width-2 {
    list-style: none;
    position: absolute;
    left: 50%;
    /* 用下面的两个样式 和使用 position: absolute;是等效的。本质上都是让元素的宽度变为所包含元素的宽度 */
    /*float:left;
    position: relative;*/

}

#no-sure-width-2>li {
    float: left;
    position: relative;
    left: -50%;
    /*right: 50%;*/ /*left -50%和right 50% 是等价的*/
    /*将每个分页项向左移动父元素宽度的50%*/
    background-color: #ddd;
    color: #fff;
    width: 20px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

总结

上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+，Chrome，Firefox等。

还可以使用CSS3的flexbox，transform等方式来实现水平居中。但使用这些CSS3特性来做居中时，要注意下兼容性。

详细描述和更多实现见六种实现元素水平居中