title: Center a button inside a DIV
body: <p>I'm having trouble centering a button inside a DIV.</p>
  <p>The result I get currently is:</p>
  <p><a href="https://i.stack.imgur.com/SLoAl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SLoAl.png" alt="Button in a div" /></a></p>
  <p>The HTML is:</p>
  <pre><code>&lt;div id=&quot;buttonDiv&quot;&gt;
  &lt;div class=&quot;button&quot;&gt;
  &lt;button type=&quot;submit&quot; onClick=&quot;setSid()&quot;&gt;Click here to Start Test&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The CSS consists of:</p>
  <pre><code>#buttonDiv {
          position: fixed;
          width:200px;
          height:200px;
          top: 50%;
          left: 50%;
          margin-top: -100px;
          margin-left: -100px;
          border-bottom-width:1px;
          border-top-width:1px;
          border-right-width:1px;
          border-left-width:1px;
          border-style:solid;
          border-color:#000000;
  }
  
  .button {
       display:table-cell;
       align-content:center;
       vertical-align:middle; 
  }
  </code></pre>
  <p>I believe this route should work for text but doesn't appear to work for the button. I've tried adding the class directly to the button with no joy.</p>