让不确定宽度的元素水平居中

方法一：

<div class="wrap"> <div class="inner">html ： 让 inner 居中</div> </div> 

.wrap { float: left;/* 自适应内容宽度 */ position: relative; left: 50%; } .inner { position: relative; left: -50%; }

.wrap 使用 float 是为了让 .wrap 的宽度等于 .inner 的宽度。让 .wrap 的左边在父层的中线上， 让.inner 的左边相对 .wrap 向左移动一半， 这样就可以实现 .inner 在.wrap 的父层的中间。

 relative如果参数是百分制，则是相对于父元素的位置。

  

方法二： 

<style>

　　.box{ width:800px; height:100px; background: #ccc; border:1px solid #aaa; margin:100px auto; text-align:center;}

　　.box2{display:inline-block;*display:inline;*zoom:1;}

　　a{display: block; margin:0 24px; width:116px; height: 50px; background: gold; text-decoration: none; line-height: 50px; text-align: center; float: left;}

</style>

 

<div class="box">
　　　<div class="box2">
　　　　　<a href="#">测试文件</a>
　　　　　<a href="#">测试文件</a>
　　　　　<a href="#">测试文件</a>
　　　</div>

</div>