Center-align a Paper component inside a div

Question

I can not center my <Paper> inside div. Please help

I locate <Paper> and <RaisedButton> inside div and gave with css:

.timerArea {
  text-align: center;
}

For Button it works but for Paper - no.

Style for <Paper>

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

Also my JSX:

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

and result on the image

Thanks in advance.

Answer 1

Try margin auto in paper style like this

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