title: Center-align a Paper component inside a div
body: <p>I can not center my <code>&lt;Paper&gt;</code> inside div. Please help</p>
  <p>I locate <code>&lt;Paper&gt;</code> and <code>&lt;RaisedButton&gt;</code> inside div and gave with css:</p>
  <pre><code>.timerArea {
    text-align: center;
  }
  </code></pre>
  <p>For Button it works but for Paper - no.</p>
  <p>Style for <code>&lt;Paper&gt;</code></p>
  <pre><code>const timeArea = {
    height: 150,
    width: 150,
    textAlign: 'center',
    rounded: true,
    paddingTop: 65,
    backgroundColor: '#76D8E3',
    opacity: 0.8
  };
  </code></pre>
  <p>Also my JSX:</p>
  <pre><code>&lt;div className={styles.timerArea}&gt;
    &lt;Paper style={timeArea} zDepth={1} circle&gt;{stopWatchTime}&lt;/Paper&gt;
    &lt;RaisedButton onClick={buttonRole} backgroundColor={buttonColor}&gt;{buttonName}&lt;/RaisedButton&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and result on the image <a href="https://i.stack.imgur.com/ntQVr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ntQVr.png" alt="enter image description here" /></a></p>
  <p>Thanks in advance.</p>