Estou tentando criar uma página simples em HTML, redimensionável, na qual, o conteúdo fique todo centralizado verticalmente.
Porém não estou conseguindo centralizar as caixas de texto de nenhuma maneira.
Esse código a principio será a interface gráfica de um APP para Android. Estou codificando de forma que o conteúdo se redimensione automaticamente conforme o tamanho do Viewbox (Dispositivo).
Estou travado nesta parte de centralizar, e não consigo avançar.. Estou iniciando no desenvolvimento HTML5+CSS3 e gostaria de pedir a ajuda de vocês. Qual direção devo tomar?
Segue o código HTML que estou usando
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link href="css/login.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="divMain">
<div id="titleDiv">
<h1>LOGIN</h1>
</div>
<div id="loginDiv">
<input type="text" value="CPF/CNPJ" id="txtLogin"
onFocus="if (this.value=='CPF/CNPJ') this.value = '';"
onBlur="if (this.value=='') this.value='CPF/CNPJ';"/>
<input type="text" value="SENHA" id="txtPassword"
onFocus="if (this.value=='SENHA') this.value = ''; this.type='password';"
onBlur="if (this.value=='') {this.value='SENHA'; this.type='text';}"/>
</div>
</div>
</body>
</html>
E o código abaixo em CSS:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
background: #2F6790;
}
#divMain{
margin: auto;
width: 50%;
padding: 10px;
display:table;
}
#titleDiv{
justify-content: center;
align-items: center;
margin-top: 5%;
vertical-align:middle;
}
#txtLogin{
margin: auto;
width: 30%;
padding: 10px;
display:table-cell;
position:absolute;
}
#txtPassword{
margin: auto;
width: 30%;
padding: 10px;
display:table-cell;
position:absolute;
margin-top:5%;
}
#loginDiv{
justify-content: center;
align-items: center;
margin-top: 5%;
vertical-align:middle;
}
No aguardo. Desde já agradeço!