Question

我想在页面中央显示卡片。当我把类进度向导放在一个单独的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布局如何工作并为此正确解决？

感谢。

Answer 1

fxLayoutAlign 用于使aligin垂直居中，而 fxFill 用于获得100％的高度。

<div class="class" fxLayout fxFill fxLayoutAlign="space-around center">
</div>

Answer 2

我也很挣扎。所以这对我有用。在包含要居中的元素的div上使用此类。最新的flexLayout对于以页面为中心并不能很好地工作。宽度是元素的固定宽度，这将导致您想要居中的所有内容都可见。

.center {
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:350px;
  text-align:center;
  margin: 0 auto;
}

Answer 3

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>

使用flex布局将div居中到页面 - 角度材质2

3 个答案: