ION 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> 

お使いのブラウザのサポート要件に応じて、ページの中央にdiv要素を配置するために、絶対位置と組み合わせて、プロパティを「変換」CSS3を使用することができます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

を見てみてください。

まず、使用位置：上から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 +やその他の主要なブラウザでサポートされています。

絶対配置では、親要素の位置を監視する必要があります。 （すなわち、アイコンコンテンツの親の1つが配置されている場合、これは絶対配置がどのように適用されるかに影響する可能性がある）。あなたの提案が動作していない

（！謝罪ので、まずStackOverflowのポストフォーマットやエチケットが悪い場合）