How to add menu to middle of html page? - html

Question

This is the code of the menu which i want to add in the middle
<div id="menu">
<ul>
<li>Home</li>
<li>Baby Boy
<ul>
<li>Bodysuits</li>
<li>One Piece</li>
<li>Shoes</li>
</ul>
</li>
<li>Baby Girl
<ul>
<li>Bodysuits</li>
<li>One Piece</li>
<li>Shoes</li>
</ul>
</li>
<li>Accessories</li>
<li>Contact Us</li>
</ul>
</div>
And this is the CSS code
#menu ul{
list-style:none;
margin:0px;
padding:0px;}
#menu ul li{
background-color:#404a7f;
border:1px solid white;
border-radius:10px;
margin-right:15px;
font-family:Century Gothic;
font-size:20px;
font-weight:bold;
width:120px;
height:35px;
line-height:35px;
text-align:center;
float:left;
position:relative;}
#menu ul li a{
text-decoration:none;
color:white;
display:block;}
#menu ul li a:hover{
background-color:#191d33;
border-radius:10px;}
#menu ul ul{
position:absolute;
display:none;}
#menu ul li:hover ul{
display:block;}
So I want to make this menu appear in the middle of the page horizontally but I don't know how to do this and in a simple way. Can anybody help me please?

Answer 1

Add this to your CSS file:
#menu {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
Change #menu ul ul position from absolute to relative.
#menu ul ul{
position:relative;
display:none;}
See the fiddle:
https://jsfiddle.net/2j5k37mw/
or if you want to center it all in one line, add this to your CSS file:
#menu {
bottom: 0;
display: table;
height: 100%;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}