html - 如何使用 Flexbox 将盒子居中？

Question

我正在创建一个本地网页，但遇到了一些问题 - 我试图将我的框居中，但我尝试过的任何东西都不起作用。我有 2 个部分 - 第一个稍微向右对齐，而第二个稍微向左对齐(只粘贴了第一部分的代码)。

我尝试过使用 margin: auto 和许多我不记得的其他东西，因为我已经尝试解决这个问题一段时间了。

<div class="main-container">
  <div class="services">
    <div class="heading">
      <h2>Services</h2>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-expand-arrows-alt"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-smile"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-comments"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-user"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-gift"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
  </div>
</div>

.services {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 420px;
  border-top: 5px solid hsla(134, 97%, 14%);
  flex-wrap: wrap;
  }

/* Box titles */

.heading {
  display: inline;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  position: relative;
  color: hsl(134, 97%, 14%);
  float: left;
  top: 20px;
  left: 150px;
}

.box {
  display: block;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  height: 200px;
  width: 190px;
  border: 3px solid hsl(356, 97%, 29%);
  margin: 75px  40px;
  padding: 15px 15px;
  border-radius: 10px;
  color: hsl(134, 97%, 14%);
}

.box h3, .box p {
  text-align: center;
  margin-top: 10px;
}

.service-icon {
  text-align: center;
}

.service-icon i {
  font-size: 30px; line-height: normal;
}

Answer 1

标题 div 是 div class="services" 的子元素，它“循环”出所有子元素。

我稍微调整了标记。将标题移出了服务 div 并删除了 float 属性。

最后，我将边框改为 .main-container 类。

这是否解决了您的问题？ :)

.main-container {
   border-top: 5px solid hsla(134, 97%, 14%);
}

.services {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 420px;
 
  flex-wrap: wrap;
  }

/* Box titles */

.heading {
  display: inline;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  position: relative;
  color: hsl(134, 97%, 14%);
  top: 20px;
  left: 150px;
}

.box {
  display: block;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  height: 200px;
  width: 190px;
  border: 3px solid hsl(356, 97%, 29%);
  margin: 75px  40px;
  padding: 15px 15px;
  border-radius: 10px;
  color: hsl(134, 97%, 14%);
}

.box h3, .box p {
  text-align: center;
  margin-top: 10px;
}

.service-icon {
  text-align: center;
}

.service-icon i {
  font-size: 30px; line-height: normal;
}

<div class="main-container">
   <div class="heading">
      <h2>Services</h2>
    </div>
  <div class="services">
    
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-expand-arrows-alt"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-smile"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-comments"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-user"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-gift"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
  </div>
</div>

JSFiddle example