Cannot center the modal window from angular material

Question

It is crazy but the following code:

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material';

@Component({
    selector: 'decline',
    templateUrl: './decline.component.html',
    styleUrls: ['../../../styles/main.css']
})
    
export class DeclineComponent {

    animal: string;
    name: string;
    config: MatDialogConfig = {
        disableClose: false,
        hasBackdrop: true,
        backdropClass: '',
        width: '250px',
        height: '',
        position: {
            top: '',
            bottom: '',
            left: '',
            right: ''
        }
    };
    constructor(public dialog: MatDialog) { }

    openDialog(): void {
        let dialogRef = this.dialog.open(DialogOverviewExampleDialog, this.config);
    }

}

@Component({
    selector: 'dialog-overview-example-dialog',
    template: `
        This is nothing
          `
})
export class DialogOverviewExampleDialog {

    constructor(
        public dialogRef: MatDialogRef<DialogOverviewExampleDialog>) { }

}

does not center (horizontally and vertically) the modal window whereas in all examples I have seen so far, it is nicely centered. I cannot find the problem... I have to say that I am using '~@angular/material/prebuilt-themes/indigo-pink.css". Apart from that, I tried to center it manually by adjusting the position object inside config. However it does not accept something like left: '50%-125px'. Any good ideas, please?

Answer 1

Step 4 of Angular Material getting started.

// Add this line to style.css of your app.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 4

Be sure that you made all steps before.

Angular Material - Getting started

P.S. It's helped me.

Answer 2

Define your config as follows:

config: MatDialogConfig = {
    disableClose: false,
    hasBackdrop: true,
    backdropClass: '',
    width: '250px',
    height: '',
    position: {
        top: '50vh',
        left: '50vw'
    },
    panelClass:'makeItMiddle', //Class Name that can be defined in styles.css as follows:
};

In styles.css file:

.makeItMiddle{
     transform: translate(-50%, -50%);
 }