如何在水平对齐的div中对齐子div

<style>
    .parent-div {
        overflow: hidden; /* 清除浮动 */
    }

    .child-div {
        float: left;
        width: 50%;
    }
</style>

<div class="parent-div">
    <div class="child-div">子div1</div>
    <div class="child-div">子div2</div>
</div>

<style>
    .parent-div {
        display: flex;
    }

    .child-div {
        flex: 1;
    }
</style>

<div class="parent-div">
    <div class="child-div">子div1</div>
    <div class="child-div">子div2</div>
</div>

<style>
    .parent-div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
</style>

<div class="parent-div">
    <div class="child-div">子div1</div>
    <div class="child-div">子div2</div>
</div>

<style>
    .parent-div {
        text-align: center;
    }

    .child-div {
        display: inline-block;
    }
</style>

<div class="parent-div">
    <div class="child-div">子div1</div>
    <div class="child-div">子div2</div>
</div>