对齐位于3个不同div中的3个按钮

<style>
    .container {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    .button-div {
        flex: 1;
    }
</style>

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

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
        grid-gap: 10px; /* 网格间距 */
    }
    .button-div {
        grid-column: span 1;
    }
</style>

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