How to align a form in the center of the page?

Question

With the following code, it shows me that the form is centered on its right side which isn't what I'm going for. I struggle to align the form in the center of the page from the center of the form. I added the HTML and CSS so you can see what it looks like. I hope someone can help resolve this problem:')

 .contacter { width: 90%; margin: 5%; text-align: center; padding-top: 0px; }.contacter h1 { font-size: 36px; font-weight: 700; text-align: center; color: rgb(255, 255, 255); } /*formulaire -------------------------------------------------------------------------*/.formulaire { text-align: center; margin: 5%; padding-top: 0; width: 90%; }.row { text-align: center; }.form { max-width: 50%; margin-bottom: 1rem; }.form { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 10px; align-items: center; } #message { height: 200px; }.btn { border-radius: 10px; height: 50px; background-color: #9BA7C0; border-color: transparent; width: 175px; font-size: 1rem; } div.frm { display: block; text-align: center; } form { display: inline-block; margin-left: auto; margin-right: auto; text-align: center; width: 100%; }

 <section> <div class="boite-1"> <section class="contacter"> <h1>CONTACTER L'ETUDE</h1> <div class="formulaire"> <form class="frm"> <div class="row"> <div class="frm-col"> <input type="text" class="form" name="nom" id="nom" placeholder="Nom*"> </div> </div> <div class="row"> <div class="frm-col"> <input type="text" class="form" name="societe" id="societe" placeholder="Société"> </div> </div> <div class="row"> <div class="frm-col"> <input type="text" class="form" name="mail" id="mail" placeholder="Adresse mail*"> </div> </div> <div class="row"> <div class="frm-col"> <input type="text" class="form" name="tel" id="tel" placeholder="Téléphone*"> </div> </div> <div class="row"> <div class="frm-col"> <textarea class="form" name="message" id="message" cols="30" rows="7" placeholder="Message*"></textarea> </div> </div> <div class="row"> <div class="sbmt"> <input type="submit" value="Envoyer la demande" class="btn"> <span class="demande envoyée"></span> </div> </div> </form> </div> </section> </div> </section>

Answer 1

you can use

.frm-col {
  display: flex;
  justify-content: center;
}

Answer 2

In Your css file replace the.contacter with this below

 .contacter {
  width: 90%;
  margin: 5%;
  text-align: center;
  padding-top: 0px;

  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

This will solve your issue

for more info on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

.formulaire{
    margin: auto;
    padding-top: 0;
    width: 90%; // try using a fixed with if it is still not working
}

or

.frm-col{
    display: flex;
    justify-content: center;
}