CSS，如何在 Angular 2 的叠加层内垂直居中文本

Question

我有一个叠加层，用于显示微调器(一个 Angular Material 组件)和一个文本。此叠加层遍布整个页面，您无法单击下面的元素。

微调器位于页面中间，我希望“正在加载”文本与微调器垂直对齐，位于微调器的底部——当然，水平居中。

这是我的 HTML 代码和 CSS 样式:

<div id="overlay" [style.display]="this.showOverlay">
   <div id="overlay-spinner">
      <mat-spinner [diameter]="80" color="accent"></mat-spinner>
   </div>
   <div id="overlay-text">
      <span>Loading ...</span>
   </div>
</div>


#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 1; /* Specify a stack order in case you're using a different 
    order for other elements */
    cursor: default; /* Add a pointer on hover */
}

#overlay-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

#overlay-text {
    position: absolute;
    top: 65%;
    left: 50%;
    font-size: 40px;
    color: white;
    transform: translate(-65%,-50%);
   -ms-transform: translate(-65%,-50%);
}

你不必关心标签内的 [] 属性，因为它们是 Angular 代码。它们用于设置微调器属性或显示整个叠加层。

我尝试使用绝对位置、前 65% 和左 50%，但微调器和文本没有很好地对齐。我该怎么做？

Answer 1

我相信你最好的镜头是 display:flex 在叠加层上的方向和对齐方式(见下面的片段)。在 flex 上，您可以阅读更多 here in this相当全面和伟大的指南。我希望这就是您所期望的!

p.s.: 我使用“spinner is here”来确保它可见

p.s.2.: 不要让您的眼睛欺骗您，“正在加载”末尾的“...”实际上位于微调器文本正下方的中心

#overlay {
    position: fixed;
    display: flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1; 
    cursor: default; 
}

#overlay-text {
    font-size: 40px;
    color: white;
}

<div id="overlay" [style.display]="this.showOverlay">
   <div id="overlay-spinner">
     <p>spinner is here</p>
   </div>
   <div id="overlay-text">
      <span>Loading ...</span>
   </div>
</div>