как центрировать и опустить кнопку

Question

Я новичок в CSS, может кто-нибудь помочь мне с макетом. Ниже макет у меня есть

Я хочу, чтобы зеленая кнопка была в центре и в нижней части ее контейнера (белая область), и я использую flexbox. Ниже мой код:

//html

 <div className="box-layout">
        <div className="box-layout__box">
            <h1 className="box-layout__title">Expensify</h1>
            <p>It's time to get your expenses under control</p>
            <button className="button" onClick={startLogin}>Login with Google</button>
            <button className="button_anon" onClick={startLoginAnonymously}>Try it</button>
        </div>
    </div>

и CSS

.box-layout {
    background: url('/images/bg.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.box-layout__box{
    background: fade-out(white, .15);
    border-radius: 3px;
    padding: $l-size $m-size;
    text-align: center;
    width: 25rem;
}

.button {
    background: $blue;
    border: none;
    color: white;
    font-weight: 300;
    font-size: $font-size-large;
    padding: $s-size;
}

.button_anon {
    background: green;
    border: none;
    color: white;
    font-weight: 300;
    font-size: 1.5rem;
    padding: 0.8rem;

}

Answer 1

Я верю, что приведенный ниже код должен делать то, что вы хотите

.box-layout__box{
    background: fade-out(white, .15);
    border-radius: 3px;
    padding: $l-size $m-size;
    text-align: center;
    width: 25rem;
    flex-direction: column;
    justify-content: center;
}

Там - довольно хорошая статья о flexbox и о том, как его использовать

Answer 2

Попробуйте код <br> прямо над зеленой кнопкой. Кажется, это должно быть уже по центру. В противном случае оберните его вокруг div и выровняйте div по центру.