如何在页面中心对齐表单？

Question

使用以下代码，它向我展示了表单以右侧为中心，这不是我想要的。 我很难将表单从表单的中心对齐到页面的中心。 我添加了 HTML 和 CSS 以便您可以看到它的外观。 我希望有人可以帮助解决这个问题:')

 .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

您可以使用

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

Answer 2

在您的 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 文件中，将.contacter 替换为以下内容

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

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

这将解决您的问题

有关 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
}

或者

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