一般情况下，如果想对内容子元素进行水平居中的话，那只要将父级元素设置为：text-align:center;就可以了。如果子元素也是block可以display:inline-block;

但是如果在宽度不定的情况下如何水平居中？可以用wrapper加float办法。

<style>
    .wrapper{
      width:200px;
      border:1px solid blue;
      float:left;
      position:relative;
      left:50%;
    }
    .child{
      border:1px solid green;
      position:relative;
      left:-50%;
      text-align:center;
    }

效果如下：

不定宽的水平居中

注意观察定位点的移动规律，其中的百分比均是相对于父级元素。父级div相对定位右移50%;子级div相对于父级再左移50%;浮动似乎可要可不要。

就行了。