在网格列中对齐项目中心[重复]

Question

我使用 CSS 网格布局创建了一个联系表单，它有 4 个输入字段和一个超过 2 列的提交按钮。

2 个输入字段为 1fr，2 个输入字段为 1/3 宽。我正在尝试将提交按钮置于输入字段下方。我附上了我的 figma 设计的屏幕截图，这样你就可以看到我是如何尝试定位我的提交按钮的。

在阅读了一些关于堆栈溢出的答案后，似乎要使用 justify-content: center on the submit button 我需要在表单中创建一个 div 容器，该容器跨越所有列 1/3 以将按钮放置在其中。然后显然 justify-content: center 可以使用。我已经按照其他答案的建议这样做了，但我仍然无法正常工作。

有人知道我哪里出错了吗？

/* Homepage Contact Form */

.container-form {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-bottom: 2rem;
}

.homepage-contact {
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 70rem;
  padding-top: 13rem;
}

.contact-message {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  font-family: 'Raleway', sans-serif;
  line-height: 3rem;
}

.home-contact-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 90rem;
}

.home-contact-form form p {
  margin: 0.8rem;
}

.home-contact-form form .full {
  grid-column: 1 / 3;
}

.contact-btn-container {
  grid-column: 1/ 3;
  justify-content: center;
}

.home-contact-form form input {
  height: 4rem;
}

.home-contact-form form input,
.home-contact-form form textarea,
home-contact-form {
  width: 100%;
}

input {
  padding-left: 1.5rem;
}

textarea {
  padding-left: 1.5rem;
}

<!-- Homepage contact start -->
<section class="homepage-contact container-form">
  <div class="homepage-contact-text">
    <h2 class="title contact-title">Lets Discuss Your Project</h2>
    <p class="contact-message">We’re always happy to discuss your project with you and put together a free proposal, just fill out the form below or give us a call to get started</p>
  </div>
</section>
<div class="home-contact-container">
  <div class="home-contact-form">
    <form action="">
      <p class="full">
        <input type="text" name="name" placeholder="Name">
      </p>
      <p>
        <input type="email" name="email" placeholder="Email">
      </p>
      <p>
        <input type="text" name="phone" placeholder="Phone">
      </p>
      <p class="full">
        <textarea name="message" placeholder="Message" rows="15"></textarea>
      </p>
      <div class="contact-btn-container">
        <p>
          <button class="contact-btn">Submit</button>
        </p>
      </div>

    </form>
  </div>

</div>

Answer 1

只需使用.contact-btn {display: block; margin: 0 auto;}。

/* Homepage Contact Form */

.container-form {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-bottom: 2rem;
}

.homepage-contact {
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 70rem;
  padding-top: 13rem;
}

.contact-message {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  font-family: 'Raleway', sans-serif;
  line-height: 3rem;
}

.home-contact-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 90rem;
}

.home-contact-form form p {
  margin: 0.8rem;
}

.home-contact-form form .full {
  grid-column: 1 / 3;
}

.contact-btn-container {
  grid-column: 1/ 3;
  justify-content: center; /* This can be removed */
}

.home-contact-form form input {
  height: 4rem;
}

.home-contact-form form input,
.home-contact-form form textarea,
home-contact-form {
  width: 100%;
}

input {
  padding-left: 1.5rem;
}

textarea {
  padding-left: 1.5rem;
}

.contact-btn {
  display: block;
  margin: 0 auto;
}

<!-- Homepage contact start -->
<section class="homepage-contact container-form">
  <div class="homepage-contact-text">
    <h2 class="title contact-title">Lets Discuss Your Project</h2>
    <p class="contact-message">We’re always happy to discuss your project with you and put together a free proposal, just fill out the form below or give us a call to get started</p>
  </div>
</section>
<div class="home-contact-container">
  <div class="home-contact-form">
    <form action="">
      <p class="full">
        <input type="text" name="name" placeholder="Name">
      </p>
      <p>
        <input type="email" name="email" placeholder="Email">
      </p>
      <p>
        <input type="text" name="phone" placeholder="Phone">
      </p>
      <p class="full">
        <textarea name="message" placeholder="Message" rows="15"></textarea>
      </p>
      <div class="contact-btn-container">
        <p>
          <button class="contact-btn">Submit</button>
        </p>
      </div>

    </form>
  </div>

</div>

Answer 2

.contact-btn-container {
  position: relative;
  grid-column: 1/ 3;
  justify-content: center;
  left: 0;
  right: 0;
  margin: auto;
}
form .contact-btn{
  position: relative;
  width: 300px;
  height: 70px;
  background-color: blue;
  color: white;
}