在 IONIC 2/3 中将 ion-content 的内容渲染到屏幕中心

Question

我创建了一个登录页面，其中输入了用户名和密码，然后是按钮和超链接。我想将整个离子含量水平和垂直放置在屏幕中心。

ion-content {
  position: absolute;
  top: 50%;
  left: 0%;
  right: 50%;
  margin: 0 auto;
  margin-top: 0;
  margin-left: 0;
}

// .div1 {
//     position: absolute;
//     background-color: green;
//     top: 0;
//     left: 0;
//     right: 0;
//     bottom: 0;
//     display: block;
//     width: 100%;
//     height: 100%; // contain: layout size style;
// }
// // .Absolute-Center {
// //   margin: auto;
// //   position: absolute;
// //   top: 0; left: 0; bottom: 0; right: 0;
// // }
// div {
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     right: 0;
//     margin: auto;
//     width: 100%;
//     height: 100%;
//     background-color: transparent;
// }

<ion-header>

  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>


  <ion-item>
    <ion-label floating>User Name</ion-label>
    <ion-input [(ngModel)]="user.username" type="text" style="background-color:transparent"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input [(ngModel)]="user.password" type="password"></ion-input>
  </ion-item>
  <button padding (click)="homePage()" color=secondary ion-button full round>Login</button>
  <a (click)="registerPage()">New ? Register here</a>


</ion-content>

你能推荐一些其他的方法来实现它吗？输出应该非常灵敏。

Answer 1

您可以使用 flexbox 将内容垂直和水平居中。这可能会帮助您入门：

ion-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

<ion-header>
  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-item>
    <ion-label floating>User Name</ion-label>
    <ion-input [(ngModel)]="user.username" type="text" style="background-color:transparent"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input [(ngModel)]="user.password" type="password"></ion-input>
  </ion-item>
  <button padding (click)="homePage()" color=secondary ion-button full round>Login</button>
  <a (click)="registerPage()">New ? Register here</a>
</ion-content>

Answer 2

您可以在 app.scss 文件中添加此样式规则：

.vertical-center {
    .fixed-content,
    .scroll-content {
        display: flex;
        align-items: center;

        ion-list {
            max-width: 300px; 
            width:100%; 
            margin: auto; 
            text-align: center;
        }
    }
}

然后将项目包裹在 ion-list 中，如下所示：

<ion-header>
    <ion-navbar>
        <ion-title>login</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding class="vertical-center">
    <ion-list>
        <ion-item no-padding>
            <ion-label floating>User Name</ion-label>
            <ion-input [(ngModel)]="user.username" type="text" style="background-color:transparent"></ion-input>
        </ion-item>
        <ion-item no-padding>
            <ion-label floating>Password</ion-label>
            <ion-input [(ngModel)]="user.password" type="password"></ion-input>
        </ion-item>

        <button padding (click)="homePage()" color=secondary ion-button full round>Login</button>

        <a (click)="registerPage()">New ? Register here</a>
    </ion-list>
</ion-content>

请看this working plunker

Answer 3

根据浏览器的支持要求，可以使用CSS3'transform'属性，结合绝对定位，将div放在页。

首先，使用position:absolute放置页面左上角的div 50%：

position:absolute;
top:50%;
left:50%;

https://jsfiddle.net/bfdqL5um/1/
（红色边框纯粹是为了说明方框）

这会将 div 的左上角置于页面中央。然后，您可以使用 transform/translate 将其向后移动其高度和宽度的 50%：

transform:translate(50%,50%);

盒子现在完全居中。
https://jsfiddle.net/bfdqL5um/2/

IE9+ 和所有其他主要浏览器均支持此功能。

请注意，对于绝对定位，您必须注意任何 parent 元素的位置。（即，如果 icon-contents parent 之一被定位，它可能会影响这个绝对定位的应用方式。

（首先是 Whosebug post 如果格式或礼节不佳，我们深表歉意！）

Answer 4

这对我有用：

<ion-grid  class="center-grid">
</ion-grid>
    ion-grid {
        &.center-grid {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) !important;
            display: block !important;
            /*width: 100%;*/
        }
    }

在 IONIC 2/3 中将 ion-content 的内容渲染到屏幕中心

Render content of ion-content to the centre of screen in IONIC 2/3

html

css

sass

ionic2

ionic3