如何在MudBlazor的DialogActions中通过Justify Content居中MudButton

要让MudDialog的DialogActions内的按钮居中，直接通过设置justify-content: center即可，下面是几种简单的实现方式：

• 直接内联样式设置
  给DialogActions组件添加Style属性，直接指定对齐方式：

  <MudDialog>
      <DialogContent>
          这里是对话框的内容区域
      </DialogContent>
      <DialogActions Style="justify-content: center;">
          <MudButton OnClick="() => Dialog.Close(DialogResult.Cancel)">取消</MudButton>
          <MudButton Color="Color.Primary" OnClick="() => Dialog.Close(DialogResult.Ok(true))">确认</MudButton>
      </DialogActions>
  </MudDialog>
  

• 使用自定义CSS类（便于复用）
  先在全局样式或组件样式里定义一个类：

  .centered-dialog-actions {
      justify-content: center;
  }
  

  然后给DialogActions添加Class属性引用这个类：

  <MudDialog>
      <DialogContent>
          这里是对话框的内容区域
      </DialogContent>
      <DialogActions Class="centered-dialog-actions">
          <MudButton OnClick="() => Dialog.Close(DialogResult.Cancel)">取消</MudButton>
          <MudButton Color="Color.Primary" OnClick="() => Dialog.Close(DialogResult.Ok(true))">确认</MudButton>
      </DialogActions>
  </MudDialog>
  

• 使用MudBlazor内置工具类
  MudBlazor提供了内置的flex布局工具类，直接组合使用d-flex和justify-content-center即可：

  <MudDialog>
      <DialogContent>
          这里是对话框的内容区域
      </DialogContent>
      <DialogActions Class="d-flex justify-content-center">
          <MudButton OnClick="() => Dialog.Close(DialogResult.Cancel)">取消</MudButton>
          <MudButton Color="Color.Primary" OnClick="() => Dialog.Close(DialogResult.Ok(true))">确认</MudButton>
      </DialogActions>
  </MudDialog>
  

这几种方法都能实现你需要的按钮居中效果，选哪种根据你的场景来——内联样式适合快速测试，自定义类适合多处复用，内置工具类则更贴合MudBlazor的框架规范。

内容的提问来源于stack exchange，提问作者hadi najafpour