React中CSS与Material UI的对齐：实现一按钮左对齐两按钮居中

直接通过绝对定位即可实现需求，修改后的代码如下：

<DialogActions sx={{ position: 'relative' }}>
  <Button>Left</Button>
  <div sx={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
    <Button onClick={handleClose}>Cancel center</Button>
    <Button onClick={handleClose}>Subscribe center</Button>
  </div>
</DialogActions>

核心逻辑： #

• 给DialogActions添加position: 'relative'，作为内部元素定位的基准容器
• 左侧按钮保持默认流式布局，自动左对齐
• 用容器包裹两个需要居中的按钮，通过left: 50%+transform: translateX(-50%)实现水平居中，这种方式不会干扰左侧按钮的布局

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