如何创建两个<div>，但其中一个必须在中心固定

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* 可根据需要设置容器高度 */
    }

    .box {
        flex: 0 0 auto;
        /* 可根据需要设置盒子样式 */
    }
</style>

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

<style>
    .container {
        display: grid;
        place-items: center;
        height: 100vh; /* 可根据需要设置容器高度 */
    }

    .box {
        /* 可根据需要设置盒子样式 */
    }
</style>

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>