Centering Menu on Screen - html

Question

I have been working on centering a menu on a webpage I've been working on. I have tried all the popular answers of display:inline-block, centering the text, margin: 0 auto; however, all attempts have failed. Is there something that I am doing wrong, or putting the css rules under the wrong elements?
Just wanting a horizontal center alignment. i have also used a css reset.
I have included a JS Fiddle at my latest failed attempt. Thank you.
JS Fiddle
<div id="menu">
<ul>
<li>
Apples
</li>
<li>
Oranges
</li>
</ul>
</div>
#menu{
width: 100%;
height: 300px;
}
#menu ul{
width: 100%;
height:100%;
}
#menu li{
display:block;
width:150px;
height:150px;
border-radius:75px;
font-size:20px;
line-height:150px;
text-align:center;
background:#000;
float: left;
}
#menu a{
display:block;
margin: 0 auto;
}

Answer 1

JSfiddle Demo
CSS
#menu {
width: 100%;
height: 300px;
text-align: center;
}
#menu ul {
display: inline-block;
margin:0;
padding:0;
}
#menu li {
width:150px;
height:150px;
border-radius:75px;
font-size:20px;
line-height:150px;
background:#000;
display: inline-block;
}
#menu a {
display:block;
margin: 0 auto;
}
NOTE- Inline block means that spacing is affected by whitespace in the HTML. There are various methods for dealing with this detailed in other SO questions & answers.

Answer 2

Here's a solution, which doesn't depend on your menu size.
Please note <ul> have a default left padding you need to remove (unless you're using a CSS reset).
#menu{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
}
#menu ul{
width: 100%;
padding: 0;
}
#menu li{
display:block;
width:150px;
height:150px;
border-radius:75px;
font-size:20px;
line-height:150px;
text-align:center;
background:#000;
float: left;
}
#menu a{
display:block;
margin: 0 auto;
}
<div id="menu">
<ul>
<li>Apples
</li>
<li>Oranges
</li>
</ul>
</div>

Answer 3

In #menu li remove float:left; and add margin:auto;.
In order to keep both items in a single line, use display: inline-block; on the #menu li and center the parent ul element with an auto width and margin.