<Ul>'deki <li>'leri ve <a>'ları nasıl ortalayabilirim?

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

const App = () => {
return (
<div className = "container">
<div className = "menu">
<div className ="uldiv">
<ul id="menuul">
<li id = "anasayfa"><a href = "/anasayfa">Ana Sayfa</a></li>
<li id = "indir"><a href = "/indir">İndir</a></li>
<li id = "hakkimizda"><a href = "/hakkımızda">Hakkımızda</a></li>
</ul> <div className = "temizle"> </div>
</div>
</div>
</div>
)
};

ReactDOM.render(
<App />,
document.querySelector("#root")
);

.uldiv ul {
list-style-type:none;
height: 18px;
overflow: hidden;
width: 50%;
display: table;
table-layout: fixed;
margin: 0px auto;
padding: 20px 0px;
}

.uldiv{
margin: 0 auto;
}

.uldiv ul li{
display: table-cell;
width: auto;
text-align: center;
}

.uldiv ul li a{
float: left;
padding: 0px 10px;
text-decoration: none;
font-weight: bold;
color: #FFE21F;
}

.uldiv ul li a:hover {
color: #2e373f;
}

.menu{
padding: 10px;
background: #141d25;
}

.temizle {
clear: both;
}

body{
background: #141d25;
}