Попытка получить кнопку, чтобы остаться в центре на верхней границе div

Question

У меня есть div, который содержит кнопку. Эта кнопка должна быть центрирована на верхней границе div, но я не могу заставить ее работать даже после использования float. Это должно оставаться отзывчивым, так как кнопка всегда должна оставаться в центре верхней границы элемента div.

Вот фотография того, что я пытаюсь сделать.

.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>

Answer 1

Используйте следующий CSS:

.ThankYouReview {
    display: flex;
    flex-direction:column;
    align-items:center;
    width: 90%;
    background-color: #F3F5FB;
    margin-left: 5%;
    margin-right: 5%;
    box-sizing: border-box;
    margin-bottom: 5%;
    margin-top: 5%;
    border-radius: 5px;
    background:black
}

.ActionButton {
    border-radius: 17px;
    background-color: blue;
    color: white !important;
    font-size: 12px;
    width: 200px !important;
    border: none;
    padding: 10px 15px;
    position:relative;
    bottom:1em;
}