How to center boxes using Flexbox?

Question

I'm creating a local webpage but have run in to some problems - I'm trying to center my boxes, but nothing I have tried works. I've got 2 sections - the first one is slightly aligned to the right, while the second is sligthly aligned to the left (have only pasted the code of the first section).

I have tried to use margin: auto and a lot of other things I don't remember, as I have tried to fix this problem for some time.

<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;
}

Possible duplicate of [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — Ahmed Aboumalek, Feb 18 '19 at 10:20

score 1 · Answer 1 · answered Feb 18 '19 at 10:27

The heading div is a child of the div class="services" which is "looping" the all the child elements out.

I adjusted the markup a bit. Moved the heading out of the services div and removed the float property aswell.

Finally I gave the border to the .main-container class instead.

Did this solve your problem? :)

.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

Thanks for your comment. Just going to clarify a little. :) My main-container is the container in which I have most of my code, so moving the border to that is not what I need. ;) The heading inside the services is needed, as it is a heading for that box only. https://codepen.io/Chaia/pen/WPLamQ — Chaia, Feb 18 '19 at 11:07

How to center boxes using Flexbox?

1 Answers1