enter image description hereSorry if it is too simple of a quesitons, but I’m still learning html and css.
I’m building a form for my school to fill in absent students and I can’t get it to stay in the middle of the screen.
I already tried this
body{
display: flex;
justify-content: center;
align-items: center;
but it went slight off-centered
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Nanum+Gothic+Coding&display=swap');
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, rgb(20, 220, 93), rgb(17,54,71));
box-sizing: border-box;
height: 100vh;
}
form{
background: linear-gradient(to right, rgb(16, 189, 134), rgb(17,54,71));
border-radius: 8px;
padding: 8px;
position: absolute;
}
.formulario{
font-family: 'Monterrat', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
}
.formulario__titulo{
font-family: 'Nanum Gothic Coding', monospace;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<title>Cadastro</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<form class="formulario"
action="https://api.sheetmonkey.io/form/t5G32DPYddanXYzN5JVX7h" method="post">
<h1 class="formulario__titulo">JUSTIFICATIVAS DE FALTA</h1>
<div>
<label for="aluno">Aluno</label>
<input type="name" placeholder="Digite o nome do aluno"
name="Nome do Aluno" id="nomeAluno" required>
</div>
<div>
<label for="anoAluno">Ano</label>
<select name="Ano " id="anoAluno">
<option value = "6">6º ano</option>
<option value = "7">7º ano</option>
<option value = "8">8º ano</option>
<option value = "9">9º ano</option>
</select>
</div>
<div >
<label for="turmaAluno">Turma</label>
<select name="Turma" id="turmaAluno">
<option value = "A">A</option>
<option value = "B">B</option>
<option value = "C">C</option>
<option value = "D">D</option>
<option value = "E">E</option>
<option value = "F">F</option>
<option value = "APC">Aprender é o Caminho</option>
</select>
</div>
<div class="flex flex-col space-y-2">
<label for="dataAtestado">Data de afastamento</label>
<input type="date" placeholder="Quando o atestado foi emitido?"
name="Data do Atestado" id="dataAtestado" required>
</div>
<div class="flex flex-col space-y-2">
<label for="duraçãoAtestado"">Dias de afastamento</label>
<input type="number" placeholder="Quantos dias serão de afastamento?"
name="Dias de Atestado" id="validadeAtestado" required>
</div>
<div class="flex flex-row flex-col space-y-6">
<label for="motivoFalta">Justificativa e comentários</label>
<input type="name" placeholder="Escreva a justificativa da falta ou outras informações relevantes..."
name="Justificativa e Observações" id="motivoFalta" required>
</div>
<button type="submit">
Enviar
</button>
</form>
</div>
</body>
</html>
2
Answers
You can centralize it by removing
position: absolute;from the form style like this:Get rid of
position: absolute;on the<form>:I’m not 100% sure why it was having that exact effect, but it’s definitely not being used effectively and is just cruft to be removed anyway, and removing it corrects the problem.
To be honest… There are a variety of typos and malformed elements in both the HTML and the CSS here. You should probably take some time to clean up much of this. In general, the simpler and cleaner your code is, the easier it’ll be for you to support it.