How to put menu in the middle?

How to best set up the menu so he was in the middle of the menu?

Himself menu
<div class="tabs">
the <ul>
the <li><a>Menu1</a></li>
the <li><a>Menu2</a></li>
the <li><a>Menu3</a></li>
 </ul> 
</div>

And his style
.tabs{
display:inline-block;
 width: 100%;
}
.tabs > div{
padding-top:10px;
}
.tabs ul{
 margin:0 auto;
padding:0px;
 text-align: center;
 display: block;
}
.tabs ul li{
margin:0px;
padding:0px;
cursor:pointer;
display:block;
float:left;
 padding:10px 15px;
color:#707070;
}
.tabs ul li a.active, .tabs ul li a.active:hover{
 color: #FFF;
 padding: 0 0 10px 0;
 -webkit-transition: all 0.2 s ease;
 -moz-transition: all 0.2 s ease;
 transition: all 0.2 s ease;
 border-bottom: 1px solid #74bee1;
}
.tabs ul li a:hover{
cursor: pointer;
 padding: 0 0 10px 0;
 border-bottom: 1px solid #74bee1;
 -webkit-transition: all 0.2 s ease;
 -moz-transition: all 0.2 s ease;
 transition: all 0.2 s ease;
color:#FFF;
}
June 11th 19 at 23:37
2 answers
June 11th 19 at 23:39
Solution
https://jsfiddle.net/z1zfau5c/
.tabs ul li{display: inline-block;}
June 11th 19 at 23:41
https://jsfiddle.net/0oh48yoq/1/
.tabs{
display:flex;
 justify-content: center;
 width: 100%;
}

Find more questions by tags CSSHTML