Как сцентрировать список?

<ul class="menu"  >
        <li class="li" ><a onclick="slidenavline(0)" >Главная</a></li>
        <li class="li" ><a onclick="slidenavline(1)" >О нас</a></li>
        <li class="li" ><a onclick="slidenavline(2)" >Чтото</a></li>
        <li class="li"><a onclick="slidenavline(3)" >Контакты</a></li>
     </ul>
         <div id="navigationline"></div>


.menu{
    width: auto;
    text-decoration: none;
    opacity: 1;
    z-index: 99999;
top:0;
    display: inline-block;
    height: 63%;
    text-outline: 0;
    position: relative;

    list-style: none;
font-size: 2vw;

}
.menu .li{

    text-align: center;
    text-decoration: none;
    opacity: 1;
    z-index: 99999;
    height: 100%;
    
    margin-left: 30px;
    float: left;
 
}