Can't Center Fixed Div - html

Question

I have read through countless threads on here and others, but have yet to find one that works for me. I am trying to get this darn div to center on the bottom of my page. It is kind of like a footer, but not exactly.
HTML :
<div id="menucontainer">
<div id="menu">
<ul>
<li><img style="width:270px; height:150px; padding-right:25px; padding-top:15px;" src="style/images/UAH.png"></li>
<li>another big test</li>
</ul>
</div>
</div>
CSS :
#menucontainer{
position:fixed;
bottom:0;
}
#menu{
position:fixed;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
width:1218px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}

Answer 1

This should be all you need:
#menucontainer {
position: fixed;
bottom: 0;
width: 100%; /* ADD - make sure this container spans the entire screen */
text-align: center; /* Align contents to the center */
}
#menu {
/* remove position: fixed */
display: inline-block;
margin: 0 auto; /* Centers the block */
text-align: left; /* Reset the text alignment */
... /* The rest stays the same */
}

Answer 2

<style>
#menucontainer{
position:absolute;
bottom: -420px;
height: 200px;
margin: 0 auto;
position: relative;
width:1218px;
}
#menu{
position: relative;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}
</style

Answer 3

DEMO
I've made some fundamential changes.
Firstly, your #menucontainer. You don't need fixed position - we can use 'sticky footer' technique to make it allways be hitched to the bottom; as we know the width, margin: 0 auto; will help us center it horizontally.
#menucontainer{
position:relative;
width: 1218px;
height:200px;
margin: 0 auto;
}
Secondy, I've added some fake content (.fake-content div) to help you get the idea how this all will look on site.
I've also added clearfix method for proper height rendering of an elements with floated children. More info here (also easy to find anywhere else).
Sticky footer technique has been taken from CSS Tricks site
Any questions? Is that what you was looking for?