Question

我正在尝试显示警报但在那里我无法添加离子选择，所以我创建了一个网格，我需要在页面中心显示该网格，并且应该禁用背景。

<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%);
}

Answer 2

添加父div并相应添加样式。

＆＃13;

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

＆＃13;

<div class="parent" ><div class="showmodal" > content </div> </div>

＆＃13;

显示类似于警报的网格

2 个答案: