元素的水平居中的方法

text-align:center;

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

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

<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;
}