21

我创建了一个简单的登录组件,我想垂直居中,但我不确定如何使用 Angular Flex 布局库来实现这一点。

app.component.html

<router-outlet></router-outlet>

login.component.html

<div fxLayout fxLayoutAlign="center center">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

样式.scss

body{
    margin: 0;
    background-color: #eff2f5;
}

截屏: 在此处输入图像描述

4

3 回答 3

17

如果容器元素与其内容的高度相同,则使用 flexbox 垂直居中的元素无效。使示例中的顶层<div>占用所有可用的垂直空间height: 100%(或其他一些 Angular Flex Layout 特定解决方案,如果可用 - 也许fxFlexFill)应该将其内容放在您想要的位置。

于 2018-01-10T21:26:26.260 回答
14

如果父元素的高度已知,那么您只需要fxLayoutAlign="center center"

<section class="intro-section">
  <div
   fxLayout="row"
   fxLayout.xs="column" 
   fxFlexFill
   fxLayoutAlign="center center"
  >
    <div fxFlex="50">
      <h1>MAYABI PORTFOLIO MULTIPURPOSE THEME</h1>
      <p>lorem ipsum dolor sit amt, consectet adop adipisicing elit, sed do eiusmod 
teporara incididunt ugt labore.</p>
    </div>
    <div fxLayout="50">
      hello
   </div>
  </div>
</section>

.intro-section {
   height: 500px;
}
于 2018-12-11T06:37:15.027 回答
10

您必须指定 fxLayout 的高度(已编辑)

<div fxLayout="row" fxLayoutAlign="center center" class="row-height">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

CSS

.row-height {
    height: 100%
}
于 2018-08-21T12:55:38.093 回答