使用flex layout - angular material 2将div居中到页面
使用flex layout - angular material 2将div居中到页面
提问于 2017-10-21 02:41:01
我想在页面中央显示一张卡片。当我将类progress-wizard放在一个单独的div中时，如下所示。
<div class="progress-wizard" >
<div fxLayout="row" fxLayoutAlign="center center">
<mat-card>
<button mat-raised-button color="primary">Primary</button>
</mat-card>
</div>
</div>css:
.progress-wizard {
height: 90vh!important;
}这样，第二个div不继承父div的高度，并且卡片不会居中对齐。我想知道flex layout是如何工作的，以及正确的解决方案？
谢谢。
回答 3
Stack Overflow用户
发布于 2018-09-26 02:34:59
用于垂直居中对齐的fxLayoutAlign和用于获得100%高度的fxFill。
<div class="class" fxLayout fxFill fxLayoutAlign="space-around center">
</div>Stack Overflow用户
发布于 2017-10-21 05:50:46
我也在和它作斗争。这就是对我有效的方法。在包含要居中的元素的div上使用此类。最新的flexLayout并不能很好地将页面居中。宽度是元素的固定宽度，它将使您希望居中显示的所有内容都可见。
.center {
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
width:350px;
text-align:center;
margin: 0 auto;
}Stack Overflow用户
发布于 2017-10-22 13:54:44
Flexbox为垂直居中提供了一个非常好的解决方案。为了在屏幕中央显示卡片，你必须将高度设置为视区高度。
.card-container {
height: 100vh;
}
.card-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card-content {
background-color: #546e7a;
color: #fff;
height: 100px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 4px;
}<div class="card-container">
<div class="card-content">
Hey! I'm in the center.
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46855390
复制相关文章
相似问题