CSS - How to center element vertically?

Asked

Viewed 40 times

-1

I’m doing a simple login page, I’m trying to center the form vertically and horizontally, to center horizontally I use margin: 0 auto, vertically I’m trying this way withdrawn of this answer:

<!DOCTYPE html>

<html>

    <head>
        <title>Login</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" type="text/css" href="css//materialize.min.css"/>
        <link rel="stylesheet" type="text/css" href="css//style.css"/>
    </head>

    <body>


        <form class="card login" method="POST" action="">
            <input type="text" placeholder="Usuário" id="tfUser" name="user"/><br/>
            <input type="password" placeholder="Senha" id="tfPass" name="pass"><br/><br/>
            <input class="btn" type="submit" value="Login" id="btnLogin" name="btnLogin"/>
        </form>

        <!--    Materialize    -->
        <script type="text/javascript" src="js//materialize.min.js"></script>

    </body>

</html>

@media screen{

    *{
        margin: 0;
        padding: 0;
    }

    /*    Login    */

    .login{
        width: 25%;
        margin: 0 auto;
        padding: 1rem;
        position: relative;
        top: 50%;
        transform: translateY(-50%); 
    }

}

That is the result:

Form

As you can see the form instead of centering it goes to screen shape, so how to solve it as simply as possible?

html css

  • But if you’re using Materialize pq does not use his grid classes?

  • @Leandrade why I want to know how to do it natively, because I will only use materialize in the Dashboard I’m building because I’m only using it to accelerate development

  • I get it, check out this question here: https://answall.com/questions/112657/centralizar-div-verticallysem-altura-fixa-no-css

1 answer

0

Try the css:

.login{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding:1em;
    width: 25%;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.