Button和Div内容样式之间的区别

Question

大家好，我想说谢谢您抽出宝贵的时间向我解释！我一直在尝试布置一张卡片。有了这张卡，我想在垂直和水平方向的中央放置一些内容。然后在右下角显示一个较小的字体。

足够容易吗？

        .flex-container{
            height: 300px;
            width: 300px;
            background-color: #ccc;
            display: flex;
            flex-direction: column;
        }

        .center{
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-grow: 1;

        }
        .bottom-right{
            display: flex;
            justify-content: flex-end;
        }



    <div class="flex-container">
        <div class="center">
            Center Horizontally and vertically
        </div>
        <div class="bottom-right">
            bottom right
        </div>
    </div>

太好了！现在是我的问题。

当我将div更改为button时，我失去了布局。

    <button class="flex-container">
        <div class="center">
            Center Horizontally and vertically
        </div>
        <div class="bottom-right">
            bottom right
        </div>
    </button>

有人可以解释为什么会发生这种情况并解决吗？