Center in vertical form with Zurb Foundation

1

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>

    
asked by anonymous 28.08.2014 / 22:19

1 answer

1

If I'm not mistaken it does not default to here , but you can do it this way: / p>

div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}
    
28.08.2014 / 22:21