在 Angular 对话框的 Kendo 中居中 div

Question

In this StackBlitz 我有一个 Kendo for Angular 对话框，其中包含一个 div。我需要将 dive vertically/horizontally 在对话框区域居中。这怎么可能？我尝试使用 "margin: auto" 但没有成功。

    @Component({
    selector: 'my-app',
    template: `
      <kendo-dialog [width]="340" [height]="200">
          <kendo-dialog-titlebar>
             The Title
        </kendo-dialog-titlebar>
         <div id="div1">CENTER THE DIV</div>
      </kendo-dialog>
    `,
    styles: [`
      #div1{
        width:120px;
        height: 40px;
        background-color: yellow;
      }

      `]
})
export class AppComponent {
    public opened: boolean = true;
}

Answer 1

基于this thread reply，并适应对话内容的上下文：

encapsulation: ViewEncapsulation.None,
styles: [`
  #div1{
    margin: auto auto;
    width:100px;
    height: 40px;
    background-color: yellow;
  }
  .k-content.k-dialog-content {
    display: flex;
  }
  `]

Modified example

在 Angular 对话框的 Kendo 中居中 div

Center div in Kendo for Angular Dialog

kendo-ui

kendo-ui-angular2