如何使用Angular Flex布局垂直居中？
如何使用Angular Flex布局垂直居中？
提问于 2018-01-11 05:12:24
我已经创建了一个简单的登录组件，我想垂直居中，但我不确定如何使用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>styles.scss
body{
margin: 0;
background-color: #eff2f5;
}截图：
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-01-11 05:26:26
如果容器元素的高度与其内容相同，则使用flexbox将元素垂直居中不起作用。使用height: 100% (或者其他Angular Flex Layout特定的解决方案，如果可用--也许是fxFlexFill)让你的例子中的顶层<div>占据所有可用的垂直空间，应该把它的内容居中到你想要的位置。
Stack Overflow用户
发布于 2018-12-11 14:37:15
如果父元素具有已知的高度，则只需使用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;
}Stack Overflow用户
发布于 2018-08-21 20:55:38
您必须指定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%
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48196156
复制相关文章
相似问题
腾讯云开发者
