Center Div on-top and in between two divs in Foundation Zurb - html

Question

I just started using Foundation and I like it a lot. I have a question. I have a design that requires the logo to be horizontally centered, on-top and in between two full divs (see attached picture).
The code below is what I have which seems to work fine but doesn't re-size on screen changes and I was wondering if there was a better way to accomplish this when working with Foundation.
Is there a possible improvement that I could do to better integrate the logo into Foundation? In other words is there a way to integrate the logo in a way that It re-sizes when the screen changes or this is my best option and I would need to re-size it manually for multiple screens?
HTML
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
CSS
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
position: relative;
}
.logo{
position:absolute;
left: 50%;
top: 20px;
margin-left: -100px;// half-width of logo
z-index: 20;
}
.box{
background-color: #333;
height: 120px;
margin-bottom: 10px;
}

Answer 1

If you know the height of the logo, you can use negative margin-top as well, but you'll probably have to wrap the 2 outer divs with a new div.
HTML:
<div class="outer">
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
CSS:
.outer {
width: 100%;
position:relative;
}
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
// position: relative; // REMOVED
}
.logo{
position:absolute;
left: 50%;
top: 50%;
margin-left: -100px;// half-width of logo
margin-top: -100px;// half-height of logo
z-index: 20;
}

Answer 2

You can do the following to make it center
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
DEMO

Answer 3

Is it the logo that doesn't resize? If so, try this:
.logo{
position:absolute;
left: 50%;
top: 20%;
margin-left: -100px;//half-width of logo
z-index: 20;
}
The logo should be able to resize now.