<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<form name="oopppssss" action="ler.php" method="post">
<span>insira xxxxxxxxxxxxxxxxxxx:</span> <input type="text" name="secret"/><br>
<span>Insira yyyyyyyyyyyyyyyyyyyyyyy: </span><input type="text" name="n_cart"/><br>
<span>Insira o ID de wwwwwww: </span><input type="text" name="id_sort"/><br>
<input type="submit" value="Enviar"/>
</form>
</div>
</body>
</html>
// Code goes here
/* Styles go here */
body {
margin:0;
padding:0;
background:#1C86EE;
}
div {
margin:0;
padding:0;
position:absolute;
width:100%;
height:100%;
}
form {
opacity:0.8;
font-family: "Courier New", Courier, monospace;
font-size:110%;
position: relative;
text-align: center;
/*height:24%;
width:48%;
left:26%;
top:38%;
*/
line-height:185%;
background-color: #B0C4DE;
box-shadow:0px 0px 5px 5px black;
/* novos valores */
left: 50%; /* metade da pagina */
top: 50%; /* metade da pagina */
width: 400px; /* utilize um tamanho que seja suficiente para seu conteúdo horizontal */
height: 260px; /* utilize um tamanho que seja suficiente para seu conteúdo vertical */
margin-left: -200px; /* utilize a metade do valor setado no width para trazer o elemento ao centro horizontal da tela */
margin-top: -130px; /* utilize a metade do valor setado no height para trazer o elemento ao centro vertical da tela */
}
@media (max-width: 410px) {
form {
width: 260px;
height: 340px;
margin-left: -130px;
margin-top: -170px;
}
}
span{
position: relative;
display: inline-block;
vertical-align: middle;
line-height:normal;
}