如何在相对布局中正确地居中一组按钮？

<style>
    .container {
        position: relative;
        width: 100%;
        height: 100vh;
    }

    .centered {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
    }

    .centered button {
        display: inline-block;
        margin: 10px;
    }
</style>

<div class="container">
    <div class="centered">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </div>
</div>