How can I centralize my form in html and css? justify content didn't work

Question

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>

Can you update this to a [mcve] as a runnable code snippet which demonstrates the problem, including the HTML and CSS? — David, Jul 12 '23 at 20:57
Correct. You can even create a [runnable code snippet](https://meta.stackoverflow.com/q/269753/328193) directly in the question, so the question itself can clearly demonstrate the problem. — David, Jul 12 '23 at 21:02

score 0 · Answer 1 · answered Jul 12 '23 at 21:14

Get rid of position: absolute; on the <form>:

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

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

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.

score -1 · Accepted Answer · answered Jul 12 '23 at 21:14

You can centralize it by removing position: absolute; from the form style like this:

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

How can I centralize my form in html and css? justify content didn't work

2 Answers2