如何在Material UI的Card组件中将button标签实现水平垂直居中

1. 修复卡片收缩问题 #

首先给Card组件添加尺寸约束，避免因内容过少自动收缩，你可以根据业务需求调整数值：

.card {
  /* 可替换为固定宽高，例如 width: 400px; height: 300px */
  min-width: 320px;
  min-height: 240px;
  /* 可选：添加内边距避免按钮贴边，box-sizing 防止内边距撑大卡片尺寸 */
  padding: 16px;
  box-sizing: border-box;
  /* 以下为可选的卡片基础样式 */
  border: 1px solid #eee;
  border-radius: 8px;
}

如果需要卡片占满父容器的全部可用空间，直接将min-width/min-height替换为width: 100%/height: 100%即可。

2. 实现按钮水平+垂直居中 #

两种成熟的实现方案，按需选择即可：

方案1：Flex布局（兼容性最优，适用绝大多数场景） #

给Card组件新增Flex相关属性：

.card {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

方案2：Grid布局（代码更简洁） #

不需要兼容IE等老旧浏览器时可以用这个方案，一行属性实现双向居中：

.card {
  display: grid;
  place-items: center;
}

框架组件示例（React） #

如果是在前端框架中使用，直接把样式写到组件内即可：

function Card() {
  return (
    <div style={{
      minWidth: '320px',
      minHeight: '240px',
      padding: '16px',
      boxSizing: 'border-box',
      border: '1px solid #eee',
      borderRadius: '8px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <button>操作按钮</button>
    </div>
  )
}

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