Centering content horizontally using flexbox [duplicate]

Question

I'm struggling to center horizontally some content in my container:

.container {
  display: flex;
  flex-direction: column;
  width: 600px;
  background-color: blue;
  justify-content: center;
  /* Not centering content horizontally? */
}
.item {
  max-width: 500px;
  height: 100px;
  background-color: yellow;
  border: 2px solid red;
}

<div class="container">
  <div class="item"></div>
  <section class="item"></section>
  <section class="item"></section>
  <footer class="item"></footer>
</div>

I would have thought justify-content would have done the trick, but to no avail.

Any help would be greatly appreciated Thanks!

possible duplicate: stackoverflow.com/q/32551291/3597276

Michael Benjamin
– Michael Benjamin

2016-11-16 12:05:56 +00:00
Commented Nov 16, 2016 at 12:05 — Michael Benjamin
– Michael Benjamin, Commented Nov 16, 2016 at 12:05

kukkuz · Accepted Answer · 2016-11-16 11:58:38Z

11

The property justify-content:center aligns the flex-items along the flex direction - use align-items:center- see demo below:

.container {
  display: flex;
  flex-direction: column;
  width: 600px;
  background-color: blue;
  justify-content: center;
  align-items:center;/*NEW*/
}
.item {
  max-width: 500px;
  width: 250px;/*NEW*/
  height: 100px;
  background-color: yellow;
  border: 2px solid red;
}

<div class="container">
  <div class="item"></div>
  <section class="item"></section>
  <section class="item"></section>
  <footer class="item"></footer>
</div>

Refer: Flexbox W3C spec

Below is an image that applies when flex-direction is row:

a. Main axis alignment : justify-content

b. Cross axis alignment : align-items

When the flex-direction is row, the main-axis is horizontal but when it is column, it is the other way around.

edited Nov 16, 2016 at 11:58

answered Nov 16, 2016 at 11:53

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edwarric Over a year ago

Thank you very much for the in-depth response! Means a lot, cheers

El0din · Accepted Answer · 2016-11-16 11:52:48Z

1

Add align-items:center;

.container {
  display: flex;
  flex-direction: column;
  width: 600px;
  background-color: blue;
  justify-content: center; 
  align-items:center;
}

answered Nov 16, 2016 at 11:52

El0din

3,3683 gold badges22 silver badges33 bronze badges

Comments

kukkuz · Accepted Answer · 2016-11-17 02:05:08Z

1

Remove flex-direction:column and max-width:500px. Give some fixed width say 100px and it will work properly. If you are using flex-direction:column use align-items:center property to horizontally center and justify-center if it is row.

edited Nov 17, 2016 at 2:05

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

answered Nov 16, 2016 at 11:56

Mr.Pandya

2,0562 gold badges16 silver badges25 bronze badges

Collectives™ on Stack Overflow

Centering content horizontally using flexbox [duplicate]

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related