JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

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

CSS

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;
}