center with flexbox
Hi everyone
I want center the content of my body but I don' t know what is going wrong
html code:
my css:
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;
}
