center with flexbox

Hi everyone I want center the content of my body but I don' t know what is going wrong html code:

<body>
   <main class="container">

      <div class="info">
        <div>
            <input type="text" id="nom">
            <label for="nom">Nom:</label>
        </div>
       
        <div>
            <input type="text" id="prenom">
        <label for="prenom">Prénom:</label> 
        </div>
        <div>
            <input type="number" id="age">
        <label for="Age">Age:</label> 
        </div>

        <div>
            <input type="text" id="interet">
            <label for="interet">Centre d'interets:</label>
        </div>
        <button type="submit"  class="btn">Envoyer</button>
      </div>




   </main> 
</body>

<body>
   <main class="container">

      <div class="info">
        <div>
            <input type="text" id="nom">
            <label for="nom">Nom:</label>
        </div>
       
        <div>
            <input type="text" id="prenom">
        <label for="prenom">Prénom:</label> 
        </div>
        <div>
            <input type="number" id="age">
        <label for="Age">Age:</label> 
        </div>

        <div>
            <input type="text" id="interet">
            <label for="interet">Centre d'interets:</label>
        </div>
        <button type="submit"  class="btn">Envoyer</button>
      </div>




   </main> 
</body>

my css:

*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    
   height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
}

.container{
    background-color: blue;
    width: 450px;
    height: 400px;
    display: flex;
    align-content: center;
    justify-content: center;
}

*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    
   height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
}

.container{
    background-color: blue;
    width: 450px;
    height: 400px;
    display: flex;
    align-content: center;
    justify-content: center;
}

9 Replies

Jochem•7mo ago

the container is centered, then it has a single flex child .info which by default takes up 100% of its parent the contents of .info are just displayed by the default rules

Mannix•7mo ago

align-items not align-content 🙂 align-content is for grid