將離子內容的內容呈現在IONIC屏幕中央2/3

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

你可以在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 2

您可以使用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 3

根據您的瀏覽器支持要求，您可以使用CSS3的'transform'屬性，結合絕對定位，將div放在頁面中間。

首先，使用位置是：絕對放置格50％從頂部和左側頁面：

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

https://jsfiddle.net/bfdqL5um/1/
（紅色邊框純粹是爲了說明框）

這將div的左上角放在頁面的中心。然後，您可以使用變換/翻譯它的高度和寬度將其50％搬回：

transform:translate(50%,50%); 

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

這受到IE9 +和所有其他主流瀏覽器的支持。

請注意，對於絕對定位，您必須注意任何父元素的位置。 （即如果圖標內容父母中的一個被定位，則可能影響如何應用該圖標內容的絕對定位）。

（第一StackOverflow的交所以道歉，如果格式化或禮儀差！）