I'm using the Zurb Foundation CSS framework, and have already made several attempts to center this form in the center of the screen. I have already tried to attack with a normal CSS to put 50% on top and left and set negative margins with absolute position. But I still did not succeed. However, I am using this framework a short time. Does anyone know how to centralize this form vertically, I'm using Pure Foundation.
The result I've achieved so far was this:
FollowtheHTML:
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="pt-br" > <![endif]-->
<html class="no-js" lang="pt-br" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPARV 2.0 | Login</title>
<!-- If you are using the CSS version, only link these 2 files, you may add app.css to use for your overrides if you like -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<!-- If you are using the gem version, you need this only -->
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="large-12 columns">
<img src="images/logos/img.png" alt="" class="right">
<img src="images/logos/img.png" alt="" class="right">
</div>
</div>
<div class="row">
<div class="large-4 large-centered columns">
<form id="centro" action="">
<fieldset>
<legend>Login</legend>
<label>Usuário
<input type="text" placeholder='Digite seu usuário aqui'>
</label>
<label>Senha
<input type="password" placeholder="******">
</label>
<input type="submit" style="margin-bottom: -0.3125rem;" value="Log in" class="button tiny right">
</fieldset>
</form>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>