title: centering a div which have left aligned contents
body: <p>I am trying to build a website which I also use angular. I need to perfectly centre a div element which contains some icons (around 80) and those icons must be left aligned. Contents are filtered via text input and this filtration results in different numbers of icons every time. I've tried a grid system similar to a bootstrap's grid, flexbox, whatever. Either a small extra area is left blank on the right side when I align my contents to left, or all the elements are centred and the bottom elements are centred and the div does not look organized. Moreover, I need to keep at least 10 px of margins between each icon.   Can anyone help me? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.notfound {
    text-align: center;
  }
  
  .iconelement:hover {
    background-color: #ffffff;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
    color: #000000;
  }
  
  .iconelement:active {
    background-color: #2974d4;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
    color: #ffffff;
  }
  
  .grid-container {
    background-color: #fdfdfd;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    text-align: left;
    flex-wrap: wrap;
  }
  
  .iconelement {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background-color: #fdfdfd;
    text-align: center;
    margin: 10px;
    float: none;
    color: #000000;
  }
  
  .icons {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="ui-g "&gt;
    &lt;div class="ui-g-12" *ngIf="(icons|filter:searchText).length===0"&gt;
      &lt;div class=" ui-g-12 notfound"&gt;
        &lt;h3&gt;No results for "{{searchText}}"&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ui-xl-3 ui-lg-3 ui-md-2 ui-sm-1" (click)="unselectIcon()"&gt;&lt;/div&gt;
  &lt;div class=" ui-xl-6 ui-lg-6 ui-md-8 ui-sm-10 "&gt;
    &lt;div class="ui-g-12  grid-container"&gt;
      &lt;div class="ui-g-1 iconelement" *ngFor="let icon of icons| filter : searchText; let i = index " (click)="getIcon(icon.id)"&gt;
        &lt;i class="icons {{icon.name}}"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ui-xl-3 ui-lg-3 ui-md-2 ui-sm-1" (click)="unselectIcon()"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>ps: text align: center does not solve this problem. </p>