コンタクトフォームの画面中央への運び方

Question

以下のコンタクトフォームを画面の中央に持っていきたいのですができません。やり方を教えていただけると幸いです。

<div class="contact">
  <div class="title">
    <p>Contact</p>
  </div>
  <div class="contact-cell">
    <div class="name">
      <p>Name</p>
        <input type="text">
    </div>
    <div class="mail">
      <p>E-mail</p>
      <input type="email">
    </div>
    <div class="message">
      <p>Message</p>
      <textarea></textarea>
    </div>
    <div class="send">
      <input type="submit" value="送信する">
    </div>
  </div>
</div>

.contact {
  margin:0 auto 150px auto;
}
.name, .mail, .message {
  display: flex;
  align-items: center;
  margin: 20px auto;
}
.name p, .mail p, .message p {
  width: 100%;
  max-width: 100px;
}
.name input, .mail input, .message textarea{
  border: 1px solid #c0c0c0;
  max-width: 700px;
  width: 100%;
  padding: 15px 0;
}
.message textarea {
  height: 120px;
}
.send input {
  background-color: #000;
  color: #fff;
  padding: 15px 80px;
  margin: 30px auto 0 auto;
  display: block;
}

Answer 1

margin: auto は、余白を左右に分配することによってセンタリングされます。
ですので、幅が親要素いっぱいですと、分配する余白がないため、左寄せも中央寄せもないです。
つまり、幅を制限する必要があります。

以下のようにしてはどうですか？

.contact {
	margin: 0 auto 150px auto;
	max-width: 802px; /* 追加 */
}