-1

Estou fazendo uma simples página de login, estou tentando centralizar o formulário verticalmente e horizontalmente, para centralizar horizontalmente eu utilizo margin: 0 auto, verticalmente estou tentando desta maneira retirada desta resposta:

<!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%); 
    }

}

Eis o resultado:

Form

Como podem ver o formulário em vez de centralizar ele vai para forma da tela, então como resolver isso da forma mais simples possível?

3
  • Mas se está utilizando Materialize pq não usa as classes de grid dele?
    – LeAndrade
    14/04/2020 às 13:39
  • @LeAndrade por que quero saber como fazer nativamente, pois só vou utilizar materialize na dashboard que estou construindo por que só estou utilizando ela para acelerar o desenvolvimento 14/04/2020 às 13:42
  • Entendi, dá uma olhada nessa pergunta aqui: pt.stackoverflow.com/questions/112657/…
    – LeAndrade
    14/04/2020 às 14:04

1 Resposta 1

0

Tente o css:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .