css中元素的水平居中

关于css元素的水平居中，有两种办法可以得到：一种是 自动定义margin的左右宽度来实现，一种是用position的相对定位和绝对定位来实现。
举一个简单的例子：

<div>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</div>

在页面上有四个连接，想要它们水平排列，并且居中，就像我们见到的页面导航一样：

用第一种方法的话，我们可以这样写css文件：

div{

    width:100%; 
    height: 40px;
}

ul
{
    width:364px;/*四个li的宽度*/
    margin: 0 auto;


}
li{
    display:inline;
    float:left;
    width:auto;
    }

margin的边框定义顺序是top right bottom left如果只定义两个数值，默认为top和right，bottom默认为top值，left默认为right值，我们想要的是左右边距由浏览器自动定义。这是简单的一层div中ul元素的居中，如果有多层嵌套，需要理清相互之间的关系，想好是哪个元素相对哪个元素的居中。

第二种方法是使用position中的绝对定位absolute和相对定位relative来使元素居中。css代码如下：

div{

    width:100%;
    position:relative;/*上一层要定义为相对定位*/
}

ul
{

    width: 364px;   /*四个li的宽度*/
    position: absolute;/*被包含的层定义为绝对定位*/
    top:0;
    left: 50%;/*绝对定位要定义相关的位置，水平的话用top、left就够了*/
    margin-left: -182px;/*这个是宽度的一半，要注意用负值*/
}
li{
    display:inline;
    float:left;
    width:auto;/*自适应宽度*/
    }

事实上，position属性是为布局定位而存在，会改变元素框的在流中的位置，因而若可以使用第一种方法达到水平居中首选第一种方法。