如何在iOS和Android的屏幕中间(垂直和水平)对齐离子卡

Question

如何在屏幕中间对齐离子卡(垂直和水平(？

在iOS模拟器上调试会显示卡片，但左侧的空白大于右侧。所以没有真正集中。为了正确居中，我必须left: 47.5%；而不是left: 50%

• 简单离子卡

  <ion-card class="error">
  <ion-card-header class="error-header">
  <ion-icon name="error"></ion-icon>
  Error
  </ion-card-header>
  <ion-card-content class="error-body">
  Error occurred!    
  </ion-card-content>
  </ion-card>
  

• sass文件中的样式

  .error {
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  position: absolute;
  .error-header {
  position: relative;
  text-align: center;
  top: 36%;
  font-size: 3.0em;
  width: 100%;
  font-weight: bold;
  color: red;
  }
  .error-body {
  font-size: 1.0em;
  text-align: center;
  position: relative;
  top: 52%;
  width: 100%;
  }
  }  
  

Answer 1

IMO检查您的css，它应该是

.error {
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
position: absolute;
} // close here
.error-header {
position: relative;
text-align: center;
top: 36%;
font-size: 3.0em;
width: 100%;
font-weight: bold;
color: red;
}
.error-body {
font-size: 1.0em;
text-align: center;
position: relative;
top: 52%;
width: 100%;
}

//不在这里

如果不知道卡片的大小，那么像尝试一样固定位置

.error {
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
position: fixed;
}

如果你设置了固定的位置，那么试试

.error {
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
position: absolute;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}

或

你最好能通过这个

Answer 2

.error｛宽度：50%；高度：自动；边距：自动；｝

Answer 3

您需要在一行中添加XY坐标

transform: translate(-50%, -50%);