居中对齐 div 内的 Paper 组件

Question

我无法将我的<Paper> 居中在 div 中。请帮忙

我在 div 中找到 <Paper> 和 <RaisedButton> 并使用 css 给出：

.timerArea {
  text-align: center;
}

对于 Button 它有效，但对于 Paper - 没有。

<Paper> 的样式

const timeArea = {
  height: 150,
  width: 150,
  textAlign: 'center',
  rounded: true,
  paddingTop: 65,
  backgroundColor: '#76D8E3',
  opacity: 0.8
};

还有我的 JSX：

<div className={styles.timerArea}>
  <Paper style={timeArea} zDepth={1} circle>{stopWatchTime}</Paper>
  <RaisedButton onClick={buttonRole} backgroundColor={buttonColor}>{buttonName}</RaisedButton>
</div>

和图片上的结果

提前致谢。

Answer 1

在这样的纸张样式中尝试自动边距

const timeArea = {
  height: 150,
  width: 150,
  textAlign: 'center',
  rounded: true,
  paddingTop: 65,
  backgroundColor: '#76D8E3',
  opacity: 0.8,
  margin: auto,
};