弯曲容器和ngIf水平居中

Question

我有一个flex容器和一些可以使用ngIf添加或删除的元素。

我希望另一个元素始终可见，水平居中，底部还有一个固定元素，例如：

在蓝色部分中，根据ngIf条件，我将具有不同的元素：

<div fxFlexFill fxLayout="column">

  <element1 fxFlex *ngIf="element === '1'">
  </element1>

  <element2 fxFlex *ngIf="element === '2'">
  </element2>

 <element3 fxFlex *ngIf="element === '3'">
  </element3>

  <!-- fixed element center -->

  <div class="center">
  </div>

   <!-- fixed element at bottom -->
   <div fxLayout="row" fxFlex="30px">

  </div>  

.center {   
  background-color: yellow;
  display: flex;
  justify-content: center;
 }

我该怎么办？

Answer 1

对于您希望一直可见的元素，请应用：

  

position：绝对

对于橙色元素，请使用

  

底部：0；

和黄色

  

使用权：0，最高：50％；

如果您想要更多细节，请张贴相同的小提琴

Answer 2

黄色元素遇到的问题是，使用样式时，您将其视为flexbox父/容器元素，而实际上却想将其视为其父元素的子元素。

将以下内容添加到父div应该使黄色框居中：

<div fxFlexFill fxLayout="column" fxLayoutAlign="center center">

但是，您将遇到的另一个问题是，当您以编程方式添加其他元素时，它们将以黄色div流动。取决于您要实现的布局，可能是您需要重新考虑布局元素的方式，尽管从您的帖子中尚不清楚当添加其他元素时您打算如何布局这些元素。添加到页面中。