MdDialogConfig Width Misaligned

[LilSebastian5000]

Bug, feature request, or proposal:

MdDialogConfig width should apply to md-dialog-container, rather than a div with id 'cdk-overlay-4'. Otherwise, it will not center on the screen.

What is the expected behavior?

Setting a width in MdDialogConfig should still center the dialog in the browser

What is the current behavior?

When applying a width of '900px' to my MdDialogConfig on open(), the dialog floats to the left of the screen. If the width of 900px were to be applied to the 'md-dialog-container', instead of 'cdk-overlay-4', then the issue goes away, and everything looks as expected.

However, setting CSS on 'md-dialog-container' or '.mat-dialog-container' does not apply, since the dialog generates on a button click.

What are the steps to reproduce?

1. TypeScript

let config:MdDialogConfig = {
               width: '900px'
            }

            self.dialog= this.dialog.open(DialogComponent, config);
            });

2. HTML Template

<div>
    <h4>Show Result</h4>
    <md-dialog-content>
        /*content goes here*/
    </md-dialog-content>
    <md-dialog-actions>
        <button md-raised-button (click)="dialogRef.close()">Ok</button>
    </md-dialog-actions>
</div>

What is the use-case or motivation for changing an existing behavior?

Consistent centering of dialogs

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.3.1, Material 2.0.0-beta.2

Is there anything else we should know?

This was not an issue in material 2.0.0-alpha.11-3

[crisbeto]

Closing as a duplicate of #3239.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}