how to center and bottom an button - html

Question

I'm new to CSS , can anyone help me with the layout. Below is the layout I have
I want the green button to be center and in the bottom of its container div (the white area) and I'm using flexbox. Below is my code:
//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>
and 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

I belive code below should do what you want
.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;
}
There is pretty nice article about flexbox and how to use it

Answer 2

Try the code <br>right above the green button. It seems that it should be already centered. Otherwise wrap it around a div, and align the div to center.