I am struggling to center a button on the top border of a div, even after trying various methods like floats. I need the button to always remain centered and responsive. Here is an example of what I am attempting to achieve.
.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%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="ThankYouReview" id="pnlUserCommentsDisplayed" runat="server" visible="false">
<button type="button" ID="btn" class="ActionButton" OnClick="copyReviewToClipboard();" >Click Me</button>
<div class="Content" id="ReviewContent" runat="server" visible="true" >
<p>This is content inside the box that will also be displayed.</p>
</div>
</div>