html - 如何使按钮居中和底部

Question

我是 CSS 新手，任何人都可以帮助我进行布局。下面是我的布局

我希望绿色按钮位于其容器 div（白色区域）的中心和底部，并且我正在使用 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 对齐到中心。