单击按钮时居中Div

Question

如何更好地将div元素居中（在右侧屏幕之外）？试图使弹出窗口从按钮的右侧出现到中心，但是它们稍微偏离了中心。我将每个弹出框的位置设置为绝对位置，并且我正在使用javascript更改顶部和左侧的值。我打算让弹出窗口在8秒后滑回其原始位置。

loadEventListeners();

function loadEventListeners() {
    cancelButton.addEventListener('click', moveCancelPopUp);
    acceptButton.addEventListener('click', moveAcceptPopUp);
}

function moveCancelPopUp() {
    cancelPopUp.style.position = 'absolute';
    cancelPopUp.style.top = '50%';
    cancelPopUp.style.left = '50%';
}

function moveAcceptPopUp() {
    acceptPopUp.style.position = 'absolute';
    acceptPopUp.style.top = '50%';
    acceptPopUp.style.left = '50%';
}

.accept-popup-box,
.cancel-popup-box {
    border: 2px solid black;
    padding: 20px;
    z-index: 1;
    border-radius: 5px;
    background: white;
    height: 50px;
    width: 200px;
}

.cancel-popup-box {
    position: absolute;
    top: 1px;
    right: -100%;
}

.accept-popup-box {
    position: absolute;
    bottom: 10%;
    right: -100%;
}

<div class="btn-container">
        <button class="cancel-btn">Cancel</button>
        <button class="accept-btn">Accept</button>
        <div class="cancel-popup-box">
                <div class="cancel-popup-content">
                    <p>Come Back Soon.</p>
                </div>
            </div>
            <div class="accept-popup-box">
                <div class="accept-popup-content">
                    <p>Thank You!</p>
                </div>
            </div>
            <script src="challenge2.js"></script>
  </div>