.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>

.wp {position:relative; left:50%; float:left;}

.test {position:relative; right:50%; z-index:; 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>

.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>

.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>