Angular - modal popup - Bg cover centered ver horizantally

app.module.ts
------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { UiComponentsModule } from './ui-components/ui-components.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    UiComponentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts
-------------
import { Component, ElementRef, ViewChild } from '@angular/core';
....
export class AppComponent {
...
....
showStatusMessage = false;
openModal(){
this.showStatusMessage = true;
}
popupTitle ="success !";
statusMessageText = "open popup working"
showStatusMessageDialogclose(){
this.showStatusMessage = false;
}

app.template.html
----------------

<div><a (click)="openModal()">Open Modal</a></div>

<app-modal [close]="!showStatusMessage" [title]="popupTitle" [msg]="statusMessageText" (closepopupclicked)="showStatusMessageDialogclose()"></app-modal>

ui-components/ui-components.module.ts
-----------------------------------
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalComponent } from './modal/modal.component';

const uiComponents =[
  ModalComponent
]

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    ...uiComponents
  ],
  exports:[
    ...uiComponents
  ]
})
export class UiComponentsModule { }


ui-components/modal
-----------------
modal.component.ts
---------------
import { Component, Input, Output, OnChanges, OnInit, EventEmitter, ViewEncapsulation, HostListener } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent  {


  @Input() title:any = 'modal';
  @Input() msg:any = 'modal';
  @Input() close = modal;
  @Output() closepopupclicked = new EventEmitter();
  constructor(){
  }
  closePopup(){
    //this.close = true;
    this.closepopupclicked.emit(true);
  }
 
  keyboardEvent: any;   
@HostListener('window:keydown', ['$event'])
keyboardInput(event: any) {
this.keyboardEvent = event;
  if (event.keyCode == 27){
console.log("Esc Key press to clsoe current popup");
this. closePopup();
  }
}

}

modal.component.html
-----------------
<div [hidden]="close"  class="popup-bg">
  <div class="modal-popup-frame-container"> 
        <div class="modal-popup-title">{{title}}</div>
        <div class="modal-popup-message" [innerHTML]="msg" ></div>
        <div class="button modal-popup-button" (click)="closePopup()">Close</div>
  </div>
</div>

modal.component.css
----------------------
.popup-bg {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 14;
}

.modal-popup-frame-container{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    z-index:15;
    background: white;
    min-height: 200px;
    border-top: 50px solid green;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
}

.modal-popup-title{
    position: relative;
    margin-top: -30px;
    margin-left: 20px;
    font-size: 20px;
    color: white;
float:left;
}
.modal-popup-message{
    top: 20px;
    position: relative;
    margin-left: 20px;
    font-size: 14px;
    line-height: 20px;
    min-height: 70px;
    max-height: 70px;
    width: 100%;
    overflow-y: auto;
    float: left;
    padding-right: 33px;
}
.modal-popup-button{
    position: relative;
    float: right;
    top: 33px;
    right: 18px;
    padding: 11px 22px;
    cursor: pointer;

}