html - 页面容器不以页面对齐中心问题为中心

Question

我试图将我的页面容器居中，同时保持内容的左对齐。

我最初是用 flexbox 尝试这个但是遇到了问题，所以它有点复杂。

主包装容器居中，但是里面的容器不居中

这可以用 flexbox 实现吗？为什么即使我告诉容器居中对齐，它也没有居中？

笔的链接:https://codepen.io/jacksonrose/pen/RwNbMMm

<div class="center">Logo</div>

<div class="pageWrapper">
  <div class="country">USA</div>
  <div class="stockistItems">
    <div class="item">
      <div class="state">Montana</div>
      <span>766 Brackbill Road Gap PA<br>17527-9457 <br>+1 800 309 1500</span>
    </div>
    <div class="item">
      <div class="state">California</div>
      <span>766 Brackbill Road Gap PA<br>17527-9457 <br>+1 800 309 1500</span>
    </div>
    <div class="item">
      <div class="state">Arizona</div>
      <span>766 Brackbill Road Gap PA<br>17527-9457 <br>+1 800 309 1500</span>
    </div>
  </div>
</div>

body {
  margin: 0px;
  padding: 0px;
}
.center {
  text-align: center;
}
.pageWrapper {
    max-width: 800px;
    display: block;
    margin: 0 auto;
    padding-top: 100px;
  .country {
    font-size: 16px;
  }
  .stockistItems {
    display: flex;
    border-bottom: 1px solid #eaeaea;
    padding: 25px 0px;
    margin-bottom: 20px;
    justify-content: center;
    .item {
      display: flex;
      flex-direction: column;
      width: 33%;
    }
  }
}

主包装容器居中，但是里面的容器不居中

Answer 1

从 .item 中删除 width:33% 并给 .stockListItems 一个 justify-content: space-between。这会将 .item div 均匀地拉伸(stretch)到 .pageWrapper 容器的末尾。然后给.pageWrapper一个width: 90%:

body {
  margin: 0px;
  padding: 0px;
}

.center {
  text-align: center;
}

.pageWrapper {
  max-width: 800px;
  display: block;
  margin: 0 auto;
  padding-top: 100px;
  width: 90%;
}

.pageWrapper .country {
  font-size: 16px;
}

.pageWrapper .stockistItems {
  display: flex;
  border-bottom: 1px solid #eaeaea;
  padding: 25px 0px;
  margin-bottom: 20px;
  /*justify-content: center;*/
  justify-content: space-between;
}

.pageWrapper .stockistItems .item {
  display: flex;
  flex-direction: column;
  /*width: 33%;*/
}

<div class="center">Logo</div>

<div class="pageWrapper">
  <div class="country">USA</div>
  <div class="stockistItems">
    <div class="item">
      <div class="state">Montana</div>
      <span>766 Brackbill Road Gap PA<br>17527-9457 <br>+1 800 309 1500</span>
    </div>
    <div class="item">
      <div class="state">California</div>
      <span>766 Brackbill Road Gap PA<br>17527-9457 <br>+1 800 309 1500</span>
    </div>
    <div class="item">
      <div class="state">Arizona</div>
      <span>766 Brackbill Road Gap PA<br>17527-9457 <br>+1 800 309 1500</span>
    </div>
  </div>
</div>