Align items always to the center horizontally

Question

I am trying to get the following result on my page:

But the actual result I’m getting is this:

Now, the information:

• I’m using Skeletonjs and Vue
• The circles will be dynamic, so if for example there are 6 circles, it will be 3 on top and 3 on bottom
• I tried to use align: flex but it didn’t work

The code is this:

<template>
    <div id="items" class="container">
        <div class="header">
            <div class="row">
                <h2>Quem você conheceu?</h2>
            </div>
        </div>
        <div class="body">
            <div class="row box">
                <div v-for="a in aux" :key="a" class="four columns">
                    <image-circle></image-circle>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ImageCircle from '../components/ImageCircle';

export default {
    data: function() {
        return {
            aux: [1,2,3,4,5]
        }
    },
    components: {
        ImageCircle,
    }
}
</script>

<style>
.header {
    margin-top: 50px;
    text-align: center;
    color: #fff;
}

.box {
  display: flex;
  justify-content: center;
}

.body .column,.columns {
    margin-left: 0;
    padding: 10px;
    margin: 0 auto;
}

.body {
    margin-top: 10%;
    text-align: center;

}

html {
    height: 100vh;
    background-color: #bd4f6c;
    background-image: linear-gradient(326deg, #bd4f6c 0%, #d7816a 74%);
}
</style>

Imagecircle component:

<template>
    <div class="img-circle">

    </div>
</template>

<script>
export default {

}
</script>

<style>
.img-circle {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    border-radius: 100%;
    margin: 0 auto;
}
</style>

How can I get the expected result?

JS Fiddle: https://jsfiddle.net/y0Ldhjxo/13/

Answer 1

In CSS you will do the following:

.header {
    margin-top: 50px;
    text-align: center;
    color: #fff;
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.body .column,.columns {
    margin-left: 0;
    padding: 10px;
    margin: 0 auto;
}

.body {
    margin-top: 10%;
    text-align: center;

}

html, body{
    height: 100vh;
    background-color: #bd4f6c;
    background-image: linear-gradient(326deg, #bd4f6c 0%, #d7816a 74%);
}

.box-image {
  flex: 0 0 33.333333%;
  display: flex;
  justify-content: center;
}

.img-circle {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-radius: 100%;
}

That .box-image there is a class that I added to your HTML. It looks like this:

<div id="app">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
  <div id="items" class="container">
        <div class="header">
            <div class="row">
                <h2>Quem você conheceu?</h2>
            </div>
        </div>
        <div class="body">
            <div class="row box">
                <div v-for="img in images" :key="img" class="box-image">
                    <div class="img-circle"></div>
                </div>
            </div>
        </div>
   </div>
</div>