显示类似于警报的网格

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 并相应地添加样式。

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

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