How to center vertically with Angular Flex Layout?

Question

I've created a simple login component and I'd like to vertically center, but I'm not sure how to achieve this using the Angular Flex Layout library.

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>

styles.scss

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

screenshot:

score 18 · Accepted Answer · answered Jan 10 '18 at 21:26

18

Vertically centering elements with flexbox has no effect if the container element is the same height as its contents. Making the top level <div> in your example take up all the available vertical space with height: 100% (or some other Angular Flex Layout specific solution if available - maybe fxFlexFill) should center its contents right where you want them.

answered Jan 10 '18 at 21:26

Kaivosukeltaja

15,541
4
40
70

3

I added style="min-height: 100vh" – Christian Jan 10 '18 at 22:03

score 17 · Answer 2 · answered Dec 11 '18 at 06:37

If the parent element has a known height, all you need is 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;
}

score 11 · Answer 3 · answered Aug 21 '18 at 12:55

11

You have to specify the height of the fxLayout (Edited)

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

answered Aug 21 '18 at 12:55

Abhijith

291
4
9

in my case, I was using parent div `margin-top:-100px;` now added in child div `padding-top:100px;` problem solved. this may helpful for some one. – Saad Abbasi Aug 16 '20 at 15:36
I tried this. The code makes sense to me, but it doesn't work as expected. The height, although set to 100%, just takes the required height depending on the children elements, which in my case is only 161px so it's just centered horizontally, but not vertically. So I set the height as `850px`. However, this is just a workaround and should not rely on a static number, because it will not be centered on every device/screen width. – Ruben Szekér Aug 25 '20 at 08:59

How to center vertically with Angular Flex Layout?

3 Answers3

Linked

Related