集中联系表格内容

Question

I have built a relatively simple contact form, cant seem to center the actual content (it currently sits on the left,i'm hoping to move it dead center), my logic is the margin auto class should have worked but no luck, thanks in advance to anyone who can see where my logic is wrong.

forms are a bit new to me,maybe i'm supposed to be targeting a different element?

<section id="contact">
      <div class="contact-title">
        <h2>Lets talk about building your new site</h2>
        <h3>Contact me today and ill be in touch soon</h3>
      </div>

      <div class="contact-form">
        <form id="contact-form" method="post" action="">



          <input name="name" type="text" class="form-control" placeholder="Your Name" required>
          <br>

          <input name="email" type="email" class="form-control" placeholder="Your Email" required>
          <br>


           <input name="phone" type="text" class="form-control" placeholder="Your Phone" required>
          <br>

          <textarea name="message" class="form-control"  cols="60" rows="10" placeholder="Message goes here"></textarea>
          <br>

          <input type="submit" class="form-control submit" value="SEND MESSAGE">

        </form>
      </div>
   </section>

CSS

#contact {
margin:0;
padding: 0;
text-align: center;
background: linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url('https://images.unsplash.com/photo-1491986926302-149ec463b90a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f34dc245ab45d60718efaa50bcdecee1&auto=format&fit=crop&w=1351&q=80');
background-size: cover;
background-position: center;
}

.contact-title {
  padding-top: 3rem;
  margin-top:50px;
  text-transform: uppercase;
  color: #fff;
  transition: all 4s ease-in-out;
}

.contact-title h2 {
 font-size: 4rem;

}


form {
  margin-top: 5rem;
  transition: all 4s ease-in-out;
  text-align: center;
}

.form-control {
  width:600px;
  background:transparent; 
  border:none;
  outline: none;
  border-bottom: 1px solid grey;
  color:#fff;
}


.form-control:hover {
  width:600px;
  background:transparent; 
  border:none;
  outline: none;
  border-bottom: 1px solid grey;
  color:#fff;
}

input {
  height:45px;
}

form .submit {
  background: #ff5722;
  border-color: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  height: 50px;
  margin-top: 20px;
  text-align: center;
}

form .submit:hover {
  background: #ff5722;
  cursor: pointer;
}

.contact-form {
  width: 100%;
  margin: 0 auto;
}

Answer 1

The problem was you had fixed width for form controls for 600px and contact form width was 100%. It fills the screen and you can't actually see whether it is centred. In the below snippet I reduced the form control size into 200px and div width to 50% and you can see the form is centered.

 #contact { margin:0; padding: 0; text-align: center; background: linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url('https://images.unsplash.com/photo-1491986926302-149ec463b90a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f34dc245ab45d60718efaa50bcdecee1&auto=format&fit=crop&w=1351&q=80'); background-size: cover; background-position: center; } .contact-title { padding-top: 3rem; margin-top:50px; text-transform: uppercase; color: #fff; transition: all 4s ease-in-out; } .contact-title h2 { font-size: 4rem; } form { margin-top: 5rem; transition: all 4s ease-in-out; text-align: center; } .form-control { width:200px; background:transparent; border:none; outline: none; border-bottom: 1px solid grey; color:#fff; } .form-control:hover { width:200px; background:transparent; border:none; outline: none; border-bottom: 1px solid grey; color:#fff; } input { height:45px; } form .submit { background: #ff5722; border-color: transparent; color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 2px; height: 50px; margin-top: 20px; text-align: center; } form .submit:hover { background: #ff5722; cursor: pointer; } .contact-form { width: 50%; margin: 0 auto; } 

 <section id="contact"> <div class="contact-form"> <form id="contact-form" method="post" action=""> <input name="name" type="text" class="form-control" placeholder="Your Name" required> <br> <input name="email" type="email" class="form-control" placeholder="Your Email" required> <br> <input name="phone" type="text" class="form-control" placeholder="Your Phone" required> <br> <textarea name="message" class="form-control" cols="60" rows="10" placeholder="Message goes here"></textarea> <br> <input type="submit" class="form-control submit" value="SEND MESSAGE"> </form> </div> </section>