关于水平居中

水平居中——行内元素
对于如文本，图片等行内元素，使用text-align:center;

水平居中——定宽块状元素
前提条件：
1. 宽度确定
2. 块状元素
方法：左右margin设为auto;

<div>定宽块状元素</div>
div{
    width:500px;
    margin:10px auto;
}

水平居中——不定宽块状元素
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
三种方法：

1. 加入table标签
   第一步：为需要居中的元素加上table标签（包括tbody tr td）;
   第二步：为这个table设置左右margin为auto;

html代码
<div>
    <table>
        <tbody>
            <tr>
                <td>
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                     </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>

css部分
<style type="text/css">
    table{
        margin:0 auto;
    }
    ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    li{
        float:left;
        display:inline;
        margin-right:8px;
    }
</style>

1. 设置display:inline
   第一步：将该块级元素设置display:inline;
   第二步：使用text-align:center;

html部分
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

css部分
<style>
    .container{
        text-align:center;
    }
    .container ul{
        list-style:none;
        padding:0;
        margin:0;
        display:inline;
    }
    .container li{
        margin-right:8px;
        display:inline;
    }
</style>

1. positoin:relative
   第一步：给父元素设置float；
   第二步：父元素position:relative;left:50%;
   第三步：子元素设置 position:relative 和 left:-50% 来实现水平居中。

html部分
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

css部分
<style>
    .container{
        float:left;
        position:relative;
        left:50%
    }

    .container ul{
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        left:-50%;
    }
    .container li{
        float:left;
        display:inline;
        margin-right:8px;
        }
</style>