轻松实现元素居中

        <style>
            #test1{width:980px;margin: 0 auto;border: 1px solid #ACACAC;overflow: hidden;}
            #test1 div{height:50px;line-height: 50px;border: 1px solid #ECA6A4;margin-right: 20px;float: left;}

        </style>

        <div id="test1">
            <div>test</div>
            <div>还是test</div>
        </div>

        上面的代码实现的效果是这样

         但是现在我想让里边两个红框的div块居中显示，怎么做呢？设置margin-left？NO！因为这两个div的宽度是不固定的，要是div里边多写几个字或少写几个字div就不会居中显示了。怎么办呢？很简单！

                将外层div添加样式 text-align:center;

                里边的div添加样式 display:inline-block;去掉float:left;

               #test1{width:980px;margin: 0 auto;border: 1px solid #ACACAC;overflow: hidden;text-align: center;}
               #test1 div{height:50px;line-height: 50px;border: 1px solid #ECA6A4;margin-right: 20px;display:inline-block;}

        修改后的代码显示结果：

        效果实现了吧！o(∩_∩)o

        但是在ie6、7下，display:inline-block;没有效果，所以还得设置hack：*display:inline;*zoom:1;

        最终css代码：

                #test1{width:980px;margin: 0 auto;border: 1px solid #ACACAC;overflow: hidden;text-align: center;}
                #test1 div{height:50px;line-height: 50px;border: 1px solid #ECA6A4;margin-right: 20px;display:inline-block;*display:inline;*zoom:1;}

        完美解决居中咯。。。