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

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 >
    <section >
      <h1>CONTACTER L'ETUDE</h1>
      <div >
        <form >
          <div >
            <div >
              <input type="text"  name="nom" id="nom" placeholder="Nom*">
            </div>
          </div>
          <div >
            <div >
              <input type="text"  name="societe" id="societe" placeholder="Société">
            </div>
          </div>
          <div >
            <div >
              <input type="text"  name="mail" id="mail" placeholder="Adresse mail*">
            </div>
          </div>
          <div >
            <div >
              <input type="text"  name="tel" id="tel" placeholder="Téléphone*">
            </div>
          </div>
          <div >
            <div >
              <textarea  name="message" id="message" cols="30" rows="7" placeholder="Message*"></textarea>
            </div>
          </div>
          <div >
            <div >
              <input type="submit" value="Envoyer la demande" >
              <span ></span>
            </div>
          </div>
        </form>
      </div>
    </section>
  </div>
</section>

CodePudding user response：

you can use

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

CodePudding user response：

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/

CodePudding user response：

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

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