如何在父div中对齐两个div(徽标和菜单)？

<style>
    .parent {
        overflow: hidden; /* 清除浮动 */
    }
    .logo {
        float: left;
        width: 100px;
        height: 50px;
    }
    .menu {
        float: right;
        width: 200px;
        height: 50px;
    }
</style>

<div class="parent">
    <div class="logo">徽标</div>
    <div class="menu">菜单</div>
</div>

<style>
    .parent {
        display: flex;
        justify-content: space-between; /* 水平对齐方式 */
        align-items: center; /* 垂直对齐方式 */
    }
    .logo {
        width: 100px;
        height: 50px;
    }
    .menu {
        width: 200px;
        height: 50px;
    }
</style>

<div class="parent">
    <div class="logo">徽标</div>
    <div class="menu">菜单</div>
</div>

<style>
    .parent {
        position: relative;
        width: 100%;
        height: 50px;
    }
    .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 50px;
    }
    .menu {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 50px;
    }
</style>

<div class="parent">
    <div class="logo">徽标</div>
    <div class="menu">菜单</div>
</div>