在内容离子中居中div

Question

我需要使用下面的切换按钮来居中2个输入。这是我的代码：

<ion-content class="body">

  <div class="inputs">
    <ion-input placeholder="Name" [(ngModel)]="name"></ion-input>
    <ion-input placeholder="Surname" [(ngModel)]="surname"></ion-input>
  </div>

  <div class="center">
    <ion-toggle [(ngModel)]="male"></ion-toggle>
  </div>

</ion-content>

我的css课程是这些：

.body {

    position: absolute;
    width: 100%;
    height: 100%;
    background-color: color($colors, mybackground); 
}
.inputs {

    position: absolute;
    top: 33%;
    width: 100%;
    color: whitesmoke;
    padding-left: 5%;
    padding-right: 5%;
}

现在我想让一些课程在中心或中心切换。我竭尽全力，但我甚至无法集中精力。此外，我希望所有人都拥有一个独特的div，我希望将这个div垂直和正确地放在中心位置。我在这个页面上只有那些组件。有什么办法吗？