angular 居中,如何使用Angular Flex布局垂直居中？

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

login.component.html

Login

Login

styles.scss

body{

margin: 0;

background-color: #eff2f5;

}

screenshot:

解决方案

Vertically centering elements with flexbox has no effect if the container element is the same height as its contents. Making the top level

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.