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。）将margin: 0添加到form，使其在容器内水平居中：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

我清理了一下html以免分心......

将flex-direction: column;更改为flex-direction: row;似乎可以解决问题。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

使用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>

为什么表单不在中间？

3 个答案: