Centering box over a full background

HTML

<div id="background"></div>
<div id="outerContainer">
    <div id="mainContainer">
        <div id="box">
            <p>This is some content</p>
        </div>
    </div>
</div>

CSS

#outerContainer {
  
    margin: auto;
}
#mainContainer{
    width:100%;
    display: table-cell;
    vertical-align: middle;
}
#background {
    width:100%;
    height:100%;
    background-image:url('http://mytwopiasters.files.wordpress.com/2011/01/ocean.jpg');
    position:absolute;
    background-repeat: no-repeat;
    background-size:cover;
}
#box {
    text-align:center;
    width:100px;
    position:fixed;
    height:100px;
    background:#fff;
    border:1px #000 solid;
}