How do I center my css matrix vertically?

December 10, 2021

My objective is to center this matrix vertically. I want the cells to be 32px far from each other both vertically and horizontally, but the whole matrix to have equal distances to the left and right edge of the screen (vertical centering). My code:

.myArticle0 {
  column-count: 1;
  column-gap: 32px;
  column-rule: 0px single #aa00aa;
  margin: 2em;
  line-height: 100px;
}

.parent {
  width: 100%;
}

@media screen and (min-width: 700px) {
  .myArticle1 {
    column-count: 2;
    column-gap: 32px;
    column-rule: 0px single #aa00aa;
    line-height: 200px;
    margin: 2em;
  }
}

@media screen and (min-width: 1050px) {
  .myArticle2 {
    column-count: 3;
    column-gap: 32px;
    column-rule: 0px single #aa00aa;
    line-height: 300px;
  }
}

h1 {
  text-align: center;
  margin-top: 1.5em;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
}

.t7 {
  width: 350px;
  height: 100px;
  line-height: 100px;
  background-color: #f0a30b;
  margin-bottom: 2em;
}

.c1 {
  text-align: center;
}

<body>
  <h1>I am a cool headline</h1>

  <div style="text-align: center">(the following content is divided into one, two or three columns depending on the screen width)</div>

  <div class="parent">
    <div class="myArticle0 myArticle1 myArticle2 c1">
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
    </div>
  </div>
</body>

I tried to do the parent and child element. But it is still not centered.

Thank you.

>Solution :

There is a way simpler way to do this layout, but the quick fix for your layout is to add display: flex and justify-content: center to your .parent

.myArticle0 {
  column-count: 1;
  column-gap: 32px;
  column-rule: 0px single #aa00aa;
  margin: 2em;
  line-height: 100px;
}

.parent {
  width: 100%;
  justify-content: center;
  display: flex; 
}

@media screen and (min-width: 700px) {
  .myArticle1 {
    column-count: 2;
    column-gap: 32px;
    column-rule: 0px single #aa00aa;
    line-height: 200px;
    margin: 2em;
  }
}

@media screen and (min-width: 1050px) {
  .myArticle2 {
    column-count: 3;
    column-gap: 32px;
    column-rule: 0px single #aa00aa;
    line-height: 300px;
  }
}

h1 {
  text-align: center;
  margin-top: 1.5em;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
}

.t7 {
  width: 350px;
  height: 100px;
  line-height: 100px;
  background-color: #f0a30b;
  margin-bottom: 2em;
}

.c1 {
  text-align: center;
}

<body>
  <h1>I am a cool headline</h1>

  <div style="text-align: center">(the following content is divided into one, two or three columns depending on the screen width)</div>

  <div class="parent">
    <div class="myArticle0 myArticle1 myArticle2 c1">
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
    </div>
  </div>
</body>