如何将按钮居中和置于底部

Question

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

我希望绿色按钮位于容器div的底部（白色区域）的中心，并且在使用flexbox。下面是我的代码：

+

和CSS

//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>

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;
}

There是有关flexbox及其使用方法的很好的文章

Answer 2

尝试绿色按钮上方的代码--data "merge_requests_events=true"。似乎它应该已经居中了。否则，将其包裹在div周围，然后将div对准中心。