Search code examples
cssionic5

How to center grid vertically and horizontally on Ionic 5?

I don't know how to center the 4 icons on the center of the layout, it would be like 2 icons up and two down, im with ubuntu and cannot draw an example, sorry. The problem i have to deal with the CSS and don't have any idea. Thank you

enter image description here

My CSS at the moment:

.vertical-center {
    .fixed-content,
    .scroll-content {
        display: flex;
        align-items: center;

        ion-grid {
            max-width: 300px; 
            width:100%; 
            margin: auto; 
            text-align: center;
        }
    }
}

My HTML code:

<ion-content class="vertical-center">

  <ion-grid>
    <ion-row>
      <ion-col>
        <img src="../../assets/fbicon.png" style="width:60px;" />
      </ion-col>
      <ion-col>
        <img src="../../assets/igicon.png" style="width:60px;" />
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <img src="../../assets/twittericon.png" style="width:60px" />
      </ion-col>
      <ion-col>
        <img src="../../assets/mylogo.png" style="width:60px;" />
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Thats my goal:

enter image description here

Solution

  • Finally solved:

    I don't think its the best result but i can see much better centered on the screen so at the moment is my unique option.

    //.SCSS

    .square {
    width: 40%;
    margin: 1%;
}

.wrapper {
    display: grid;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-items: center;
  }

    //HTML

      <div class="wrapper">
    <ion-grid class="square">
      <ion-row>
        <ion-col>
          <img class="animate__animated animate__fadeInDown animate__slow" src="../../assets/icon1.png" style="width:60px;"/>
        </ion-col>
        <ion-col>
          <img class="animate__animated animate__fadeInRight animate__slow" src="../../assets/icon2.png" style="width:60px;"/>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <img class="animate__animated animate__fadeInUp animate__slow" src="../../assets/icon3.png" style="width:60px"/>
        </ion-col>
        <ion-col>
          <img class="animate__animated animate__fadeInLeft animate__slow" src="../../assets/icon4.png" style="width:60px;"/>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>