Image not centering in css

Question 1

This schould do the trick.

.menu { 
background:url(../img/MenuBar.png) ;
height:150px;
width:1242px;
position:relative;
display: table;

}

.logo{

     background:url(../img/Untitled-1.png) no-repeat center;
     width:262px;
     height:80px;
     margin:0 auto;
     display: table-cell;
     vertical-align: middle;

}

Question 2

Create a containing div using the same "margin-left: auto; margin-right: auto" or "margin: 0 auto" trick you were using. Like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
<style>
    body{
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    z-index:1000;
    }
    #container {
    }

    #bg {
        margin: 0 auto;
        width: 25%;
    }

    #menu{ 
    background-color: green;
    height:150px;
    width:600px;
    }

    #logo{
    background-color: blue;
    width:262px;
    height:80px;
    margin:0 auto;
    }
</style>
</head>
<body>
    <div id="container">
    <div id="bg">
        <div id="menu">          
            <div id="logo"></div>
        </div>
    </div>
</div>
</body>
</html>

Question 3

What's Going On

Given that you want it work be centered vertically, the only answer here so far is to give .menu styling of vertical-align:middle. That won't work. To center vertically, you need to use a position trick. You give the item a position:absolute, then you tell it to be top:50%, which will place the top of that item at 50% down.

We want the center of the item to be in the center of the container though, not the top to be at the center. So we finally add margin-top of a negative value. That negative value is half the object's height, in this case, 80px / 2 = 40px. To center horizontally, we'll need to do the same. margin:0 auto won't work now given that it's positioned absolutely.

Code

In the end, you will change this:

.logo { 
    background:url(../img/Untitled-1.png) no-repeat center;
    width:262px;
    height:80px;
    margin:0 auto;  
}

To this:

.logo {
    background:url(../img/Untitled-1.png) no-repeat center;
    width:262px;
    height:80px;
    position:absolute;
    top:50%;
    margin-top:-40px;
    left:50%;
    margin-left:-131px;
}

Working Fiddle