如何在 Ionic 5 上垂直和水平居中网格？

Question

我不知道如何将4个图标居中放置在布局的中心，就像2个图标在上和2个在下，我用ubuntu不能画例子，抱歉。我必须处理 CSS 的问题并且不知道。谢谢

我现在的CSS：

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

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

我的HTML代码：

<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>

这就是我的目标：

Answer 1

我通常将 ion-grid 或 ion-row 样式居中：

display: flex;
align-items: center;
justify-content: center;

Answer 2

终于解决了：

我认为这不是最好的结果，但我可以在屏幕中心看到更好的效果，所以目前是我唯一的选择。

//.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>

Answer 3

一直在为 React 中的 Ionic v5 寻找类似的解决方案。没有发现任何明显的东西，所以在这里为任何涉足 React 的人添加它。

以下是对我有用的方法：

export const CenteredContent = ({ children }) => {
    return (
        <IonGrid style={{ height: "100%" }}>
            <IonRow class="ion-align-items-center" style={{ height: "100%" }}>
                <IonCol class="ion-text-center">
                    {children}
                </IonCol>
            </IonRow>
        </IonGrid>
    )
}

将内容放在中间，不要太多css（屏幕截图使用 IonSpinner 组件作为儿童道具）： screenshot of what it looks like, since i am not allowed to embed images, yet...

如何在 Ionic 5 上垂直和水平居中网格？

How to center grid vertically and horizontally on Ionic 5?

css

ionic5