I've been at this for hours, no luck doing a very (I thought) simple thing. I'm trying to have a page with a background image on the entire page (background-size: cover), and an H1 and contact form centered vertically and horizontally in the center, like so:
I've tried everything I can think of, with no luck. I've definitely included the foundation-flex-grid and foundation-flex-classes in app.scss, and commented out the standard grid and classes. I have set $global-flexbox to true in _settings.scss.
I'm using the Zurb template with handlebars, if that makes a difference. Here's my very simple HTML, which is omitting the form, for simplicity's sake. I'm just trying to get this H1 to be vertically centered, and can't even do that:
<div class="main expanded"> <div class="row align-center"> <div class="large-12 columns align-center self-align-middle"> <h1>hello</h1> </div> </div> </div><!--/main-->
I've tried putting align-middle on everything, from container divs, to the row, to main--and finally tried self-align-middle. Nothing seems to work. Any ideas?