How to center align multiple span in div?

Question

I'm trying to display tags in the form of span element within a div which looks something like this.

The tags are center aligned here, but when the tags shift to the next line/row, then the below row is not center aligned.

I want to set both the rows to be center aligned.

Below is the ReactJS code for the same:

const styles = {
  tag: {
    border: "1px solid #ffffff",
    borderRadius: "10%",
    padding: 2,
    margin: "2px"
  },
  tagsWrapper: {
    width: "100%",
    padding: "5px",
    display: "flex",
    flexWrap: "wrap"
  }
};

<div style={styles.tagsWrapper}>
   <div
     style={{
       margin: "0px auto",
       display: "flex",
       flexWrap: "wrap"
     }}>
     {this.props.tags.map((tag, index) => {
       if (tag.selected)
         return (
           <span key={index} style={styles.tag}>
             {tag.label}
           </span>
         );
       else return null;
     })}
   </div>
</div>

I tried to find the solution but couldn't find any.

Answer 1

Since you are using flexbox use

justify-content:center

...on the wrapper. This should be what you are after.

justify-content: center; /* Pack items around the center */

^MDN