我不能让我的按钮内容居中

Question

Im workin on a project and whenever the button is clicked it moves along side the text that appears underneath it. Ive been working on this for the past few hours messing around and can't seem to figure it out. Im trying to have the button stay centered. I tried align-items but it doesn't seems to work for me.

body {
    margin: 0;
    font-family: "Lato", sans-serif;
}

* {
    box-sizing: border-box;
}

a {
    color: black;
    text-decoration: none;
}

.app {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: peachpuff;
}

.error,
.loading {
    margin: 22px;
    text-align: center;
}

.error {
    color: red;
}

.home-buttons-wrapper {
    display: flex;
    justify-content: space-between;

    a {
        border-radius: 5px;
        padding: 10px;
        width: 135px;
        text-align: center;
    }
}

button {
    font-size: 18px;
    padding: 15px 20px;
    margin-top: 40px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}
button:hover {
    transform: scale(1.125);
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-animation {
    animation: fade 0.5s;
}

.fortune-text {
    display: flex;
    justify-content: center;

    .h4 {
        align-items: center;
    }
}

Answer 1

Although I can't tell the HTML structure and 'move along side the text' can mean different things, my guess is the items are re-aligning because their parent container's display is set as flex and the text is relatively positioning itself, making the flexbox react.

You could try setting the position of your text to absolute or fixed , this should decouple the two elements' positions.