Image not centering in css

I am new to html and css, i have started to make a website so i started with placing the logo and the background correctly, now the problem is that i cannot vertically center my logo image.

HTML:

<!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>
</head>
<body>
    <div class="bg">
        <div class="menu">          
            <div class="logo"></div>
        </div>
    </div>
</body>
</html>

CSS:

body {
    background:url(../img/bg.png) no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    z-index:1000;
}
body {
    margin:0 ;
    padding:0;
    height: 100%;
    width: 100%;
}

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

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

Solution

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;

}