Center elements vertically with CSS Grid

Question

I have a section with 3 columns. I want to center all the content both horizontally and vertically. I have tried justify-content: center; align-items: center; but it didn't centered the elements vertically.

How can I do that?

#home-a .stats-count {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  text-align: center;
}

<section id="home-a" class="py-3">
  <div class="container">
    <div class="stats-count text-center">
      <div class="stat">
        <h2>24+</h2>
        <p>Halal Categories</p>
      </div>
      <div class="stat">
        <h2>2,495+</h2>
        <p>Halal Places</p>
      </div>
      <div class="stat">
        <h2>128+</h2>
        <p>Regions</p>
      </div>
    </div>
  </div>
</section>

MaxiGui · Accepted Answer · 2020-10-13T06:48:13.227

1

Actualy it does!

It is just that in your example, div.stats-count has a height: 100%; which will just keep the height of content so it is adapted to the content.

But if you check with a custom css as follow:

.stats-count{
      height: 100vh !important;
      background:red;
    }
    .stat{
      background: blue;
    }

DEMO

#home-a .stats-count {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  text-align: center;
}

/** ADDED for demo ***/
body{margin:0;} /**** ONLY FOR SNIPPET STACK OVERFLOW****/
.stats-count{
  height: 100vh !important;
  background:red;
}
.stat{
  background: blue;
}

<section id="home-a" class="py-3">
  <div class="container">
    <div class="stats-count text-center">
      <div class="stat">
        <h2>24+</h2>
        <p>Halal Categories</p>
      </div>
      <div class="stat">
        <h2>2,495+</h2>
        <p>Halal Places</p>
      </div>
      <div class="stat">
        <h2>128+</h2>
        <p>Regions</p>
      </div>
    </div>
  </div>
</section>

edited Oct 13 '20 at 06:48

answered Oct 13 '20 at 06:34

MaxiGui

6,190
4
16
33

It's still not working for me. I have solved it by using a flexbox on .stat div. – jixodoj Oct 13 '20 at 06:44
But what are you trying to center because in snippet everything is centered correctly. – MaxiGui Oct 13 '20 at 06:47
@Yep, Idk how this works in the snippet and not in my code – jixodoj Oct 13 '20 at 06:50
Do you have css on stat? – MaxiGui Oct 13 '20 at 06:51
1

Nevermind, it works I guess there's somthing wrong with the sass compiler. thanks for your help :) – jixodoj Oct 13 '20 at 06:52

score 0 · Answer 2 · edited Oct 13 '20 at 06:51

I'm not sure if I understood well but you want to create a cross?

I mean the same data horizontally and vertically like that?
--a--
a-b-c
--c--
If yes you don't need to right any complex css... Just add two more divs in your section.

<section class="py-3">
  <div class="vertical">
    <h2>24+</h2>
    <p>Halal Categories</p>
  </div>
  <div class="container" id="home-a">
    <div class="stats-count text-center">
      <div class="stat">
        <h2>24+</h2>
        <p>Halal Categories</p>
      </div>
      <div class="stat">
        <h2>2,495+</h2>
        <p>Halal Places</p>
      </div>
      <div class="stat">
        <h2>128+</h2>
        <p>Regions</p>
      </div>
    </div>
  </div>
  <div class="vertical">
    <h2>128+</h2>
    <p>Regions</p>
  </div>
</section>

#home-a .stats-count {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50%;
  text-align: center;
}

Update:

I have fixed it by:

#home {
  &-a {
    .stats-count {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      height: 25vh;

      .stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

like so.

Center elements vertically with CSS Grid

2 Answers2

DEMO