html - 显示类似于警报的网格

Question

我正在尝试显示警报，但无法添加 ionic 选择，因此我创建了一个网格，我需要在页面中央显示该网格，并且背景应该被禁用。

<ion-grid  class="showmodal" *ngIf="showNews" style=" background:white; width:50%; height:60%">
    <ion-row>
    </ion-row>
</ion-grid> 

我尝试了可能的 CSS，我能够得到网格，但它不会居中

 .showmodal{
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(23, 22, 22, 0.8);
        z-index: 10;
        left: 0px;
    }

即使屏幕尺寸不同，此网格也应始终位于中心。

Answer 1

由于它的高度和宽度是固定的，您可以将 CSS 用作:

 .showmodal {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}