如何在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;
     }

要么

你可以通过this更好

Answer 2

.error {width：50％;身高：自动;保证金：自动; }

Answer 3

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

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