왜 양식이 중간에 없습니까?

Question

나는 인 flexbox있는 페이지의 중간에 로그인했습니다 양식을 배치하려고 :

<div class="auth-container"> 
    <form [formGroup]="signInForm"> 
    <mat-form-field> 
     <input formControlName="username" matInput placeholder="Username"> 
    </mat-form-field> 

    <mat-form-field> 
     <input formControlName="password" matInput placeholder="Password" type="Password"> 
    </mat-form-field> 

    <mat-error *ngIf="true"> 
     Email is <strong>required</strong> 
    </mat-error> 

    <button mat-raised-button color="primary">SIGN IN</button> 
    <p>Form value {{ signInForm.value | json }} </p> 
    <p> Form status {{ signInForm.status | json}} </p> 

    </form> 
</div> 

스타일 :

.auth-container { 
    display: flex; 
    flex-direction: column; 
    align-content: center; 
    justify-content: center; 
    height: 100%; 
    width: 100%; 

    form { 
    display: flex; 
    width: 50%; 
    flex-direction: column; 
    } 
} 

가 align-content: center;이 작동하지 않습니다와 나는 이유를 알아낼 수 없습니다. 그러나 justify-content: center;이 작동합니다.

Answer 1

1.)) 컨테이너 요소의 높이 참조가 (함으로써 수직 센터링 작업을 할 html 및 body 100 % 높이를 추가합니다.

2) 수평 컨테이너 이내에 센터에 form에 margin: 0을 추가

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.auth-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-content: center; 
 
    justify-content: center; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
form { 
 
    display: flex; 
 
    width: 50%; 
 
    flex-direction: column; 
 
    margin: auto; 
 
}

<div class="auth-container"> 
 
    <form [formGroup]="signInForm"> 
 
    <mat-form-field> 
 
     <input formControlName="username" matInput placeholder="Username"> 
 
    </mat-form-field> 
 

 
    <mat-form-field> 
 
     <input formControlName="password" matInput placeholder="Password" type="Password"> 
 
    </mat-form-field> 
 

 
    <mat-error *ngIf="true"> 
 
     Email is <strong>required</strong> 
 
    </mat-error> 
 

 
    <button mat-raised-button color="primary">SIGN IN</button> 
 
    <p>Form value {{ signInForm.value | json }} </p> 
 
    <p> Form status {{ signInForm.status | json}} </p> 
 

 
    </form> 
 
</div>

Answer 2

사용 the magic of margin: auto;

form 
{ 
    display: flex; 
    width: 50%; 
    margin: auto; 
    flex-direction: column; 
} 

양식은 그럴 이유가 없다대로, flex-direction: column;을 사용하지 않는 것이 좋습니다 컨테이너의 유일한 아이 인 경우.

html, body 
 
{ 
 
    /* Don't forget to set your document width and height to 100% */ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.auth-container { 
 
    /* No need to change flex direction here */ 
 
    display: flex; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
form 
 
{ 
 
    display: flex; 
 
    /* You could use width: 50%, 
 
    but I felt max-width is a better suit here 
 
    for low resolutions */ 
 
    max-width: 50%; 
 
    /* Infinite margin from all sides centers the block */ 
 
    margin: auto; 
 
    /* This is needed for block to grow with max-width set */ 
 
    flex: 1 1 auto; 
 
    /* Handle edge cases with long text overflow */ 
 
    min-width: 100px; 
 
    flex-direction: column; 
 
}

<div class="auth-container"> 
 
    <form [formGroup]="signInForm"> 
 
    <mat-form-field> 
 
     <input formControlName="username" matInput placeholder="Username"> 
 
    </mat-form-field> 
 

 
    <mat-form-field> 
 
     <input formControlName="password" matInput placeholder="Password" type="Password"> 
 
    </mat-form-field> 
 

 
    <mat-error *ngIf="true"> 
 
     Email is <strong>required</strong> 
 
    </mat-error> 
 

 
    <button mat-raised-button color="primary">SIGN IN</button> 
 
    <p>Form value {{ signInForm.value | json }} </p> 
 
    <p> Form status {{ signInForm.status | json}} </p> 
 

 
    </form> 
 
</div>

Answer 3

내가 조금 산만하지 않도록 HTML을 정리 ...

flex-direction: column;에서 flex-direction: row;으로 변경하는 것이 트릭을 수행하는 것 같습니다.

html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.auth-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-content: center; 
 
    justify-content: center; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.auth-container form { 
 
    display: flex; 
 
    width: 50%; 
 
    flex-direction: column; 
 
}

<div class="auth-container"> 
 
    <form> 
 
     <input formControlName="username" placeholder="Username"> 
 
     <input formControlName="password" placeholder="Password" type="Password"> 
 
\t <button>SIGN IN</button> 
 
    </form> 
 
</div>