css未知宽度水平居中整理

浏览数：23 / 时间：2015年06月09日

1、text-align

兼容性很好

.wp {text-align: center;}
.test {display: inline;}

<ul class="wp">
    <li class="test">1</li>
    <li class="test">2</li>
    <li class="test">3</li>
    <li class="test">4</li>
    <li class="test">5</li>
</ul>

2、float+relative

兼容性很好

.wp {position:relative; left:50%; float:left;}
.test {position:relative; right:50%; z-index:2; float:left}

<ul class="wp">
    <li class="test">1</li>
    <li class="test">2</li>
    <li class="test">3</li>
    <li class="test">4</li>
    <li class="test">5</li>
</ul>

3、position+absolute

ie6/7/8不支持

.wp {position:relative; }
.test { 
      left:50%;  
      transform:translate(-50%,0); 
      -webkit-transform:translate(-50%,0);
      position:absolute; 
 }

<ul class="wp">
    <li class="test">
        <span class="inner">1</span>
        <span class="inner">2</span>
        <span class="inner">3</span>
        <span class="inner">4</span>
        <span class="inner">5</span>
    </li>
</ul>

4、弹性盒子

IE6/7不支持

.wp{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
    background-color: #ccc;

}
.test{
    background-color: #edd;
    display: inline-block;
    margin: 0 5px;
}

<ul class="wp">
    <li class="test">1</li>
    <li class="test">2</li>
    <li class="test">3</li>
    <li class="test">4</li>
    <li class="test">5</li>
</ul>