网格项目偏离中心

Question

每当我将浏览器的大小调整到最大时，一切都能正常工作，但包裹部分的卡片却不在中心。我到底缺了什么？

https:/jolly-poitras-00d5ec.netlify.app。

/* Packages */

.packages {
  background-color: #F3F1F6;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  padding: 50px 0;
}

.packages-title h4 {
  font-weight: 300;
  opacity: 50%;
}

.packages-title h2 {
  font-size: 2em;
}

.packages-cards h1 {
  font-family: 'Lato';
  font-size: 4em;
  padding: 10px 0 20px;
}

.packages-cards div {
  background-color: #fff;
  margin: 50px auto;
  padding: 50px 0;
  max-width: 350px;
  -webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.15);
}

.packages-cards h4 {
  font-weight: 300;
  opacity: 50%;
}

.packages-cards p {
  font-weight: 300;
  opacity: 50%;
  line-height: 2;
  padding-bottom: 20px;
}

@media(min-width: 996px) {
  .container {
    margin: 0 10%;
  }
  .showcase {
    background-image: url('imgs/cityline.jpg');
  }
  .showcase-content h1 {
    font-size: 2.5em;
  }
  .showcase-content p {
    margin: 20px 0 45px 0;
  }
  .about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 60px;
  }
  .about-cards div {
    max-width: 300px;
  }
  .packages-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
  }
  .packages-cards div {
    margin: 50px 0;
    max-width: 300px;
  }
  .sign-up {
    background-image: url('imgs/signup-1200.jpg');
  }
}

<section class="packages">
  <div class="packages-title">
    <h4>A plan for everyone</h4>
    <h2>Plans &amp; Pricing</h2>
  </div>
  <div class="container">
    <div class="packages-cards">
      <div class="basic">
        <h4>Basic Plan</h4>
        <h1>$49</h1>
        <p>
          Up to 1000 Mbps up &amp; down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
        </p>
        <button class="btn">Sign Up</button>
      </div>
      <div class="plus">
        <h4>Plus Plan</h4>
        <h1>$79</h1>
        <p>
          Up to 1000 Mbps up &amp; down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
        </p>
        <button class="btn">Sign Up</button>
      </div>
      <div class="pro">
        <h4>Pro Plan</h4>
        <h1>$99</h1>
        <p>
          Up to 1000 Mbps up &amp; down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
        </p>
        <button class="btn">Sign Up</button>
      </div>
    </div>
  </div>
</section>

Answer 1

这个部分会导致对齐到左边（居中被破坏）。

@media(min-width: 996px) {
  .packages-cards div {
    margin: 50px 0;
    max-width: 300px;
  }
}

把它改成让块居中的方式，让块居中到

@media(min-width: 996px) {
  .packages-cards div {
    margin: 50px auto;
    max-width: 300px;
  }
}

虽然您可以添加 width: 100%; 或 min-width: 230px;，根据你的口味。

Answer 2

在你的代码中加入这个。

.packages-cards {
    justify-items: center;
}

.packages-cards div {
    padding: 50px;
}