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

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用于垂直居中对齐，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>