How To Centralize Horizontal Menu Bar

This is my code for horizontal menu bar. How to centralize this in my site. It goes to the left.

<style type="text/css">
ul#navbar {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#navbar li {
float: left;
border: 1px solid black;
text-align: center;
}
ul#navbar a {
background-color: #CCC;
color: #000;
text-decoration: none;
display: block;
width: 120px;
padding: 4px;
}
ul#navbar a:hover {
background-color: #CFF;
text-decoration: underline;
}
ul#navbar ul {
display: none;
list-style-type: none;
}
ul#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
ul#navbar li:hover li {
float: none;
}
</style>

<ul id="navbar">

<li><a href="#">Home</a></li>
<li><a href="#">Parent 1</a>
<ul>
<li><a href="#">Child 1</a></li>
<li><a href="#">Child 2</a></li>
<li><a href="#">Child 3</a></li>
</ul>
</li>
<li><a href="#">Parent 2</a>
<ul>
<li><a href="#">Child 1</a></li>
<li><a href="#">Child 2</a></li>
<li><a href="#">Child 3</a></li>
</ul>
</li>