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:
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?