title: Trying to get button to stay centered on top border of div
body: <p>I have a div that contains a button.  This button needs to be centered on the divs top border, but for the life of me I can't seem to get it to work even after using floats.  This needs to stay responsive as well as the button should always remained centered on the top border of the div.</p>
  
  <p>Here's a picture of what I'm trying to to do.</p>
  
  <p><img src="https://i.stack.imgur.com/JAC60.png" alt="Button sitting on edge of div (from inside the div)"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ThankYouReview {
      display: block;
      width: 90%;
      background-color: #F3F5FB;
      margin-left: 5%;
      margin-right: 5%;
      box-sizing: border-box;
      margin-bottom: 5%;
      margin-top: 5%;
      border-radius: 5px;
  }
  
  .ActionButton {
      border-radius: 17px;
      background-color: blue;
      color: white !important;
      font-size: 12px;
      width: 200px !important;
      border: none;
      padding: 10px 15px;
      margin-bottom: -15px;
      display:inline;
      padding:10px;
      margin-left: 31%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="ThankYouReview" id="pnlUserCommentsDisplayed" runat="server" visible="false"&gt;
  
  &lt;button type="button" ID="btn" class="ActionButton" OnClick="copyReviewToClipboard();" &gt;Click Me&lt;/button&gt;
          &lt;div class="Content" id="ReviewContent" runat="server" visible="true" &gt;
              &lt;p&gt;This is content inside the box that will also be displayed.&lt;/p&gt;
                      &lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>