After implementing the CSS Transform technique to center a div both horizontally and vertically, the desired effect was achieved. However, an unexpected issue arose on pages that contained a Google Maps iframe causing the entire page to go blurry.
To view the code in action, you can check out this fiddle link. It seems like this problem is isolated to Chrome (tested on both Mac OS X and Windows 7).
Here is the HTML code snippet:
<div id="location" class="card x2">
<h2>Location</h2>
<div class="box">
<div itemscope itemtype="http://schema.org/Restaurant">
<span itemprop="name">Title goes here</span>
<span class="hours break">
<span class="highlight">Hours:</span>
<meta itemprop="openingHours" content="Su-Th 17:30-23:30">Sun-Thur 5:30pm - 11:30pm<br>
<meta itemprop="openingHours" content="Fr-Sa 17:30-00:00">Fri-Sat 5:30pm - 12:00am
</span>
</div>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2483.535006800354!2d-0.11951899999999999!3d51.5034!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604b900d26973%3A0x4291f3172409ea92!2sLondon+Eye!5e0!3m2!1sen!2suk!4v1410900461451" width="300" height="220" frameborder="0" style="border:0"></iframe>
</div>
</div>
Below is the CSS used for styling:
.card {
background-color: #1d1d1d; /* IE fallback */
background-color: rgba(29, 29, 29, 0.95);
color: #fff;
display: inline-block;
margin:0 auto;
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
padding: 30px 35px;
outline: 2px solid #3B3A37;
outline-offset: -9px;
width: 320px;
}