html如何让一个小盒子的文字垂直居中并且不影响大盒子内的其他盒子

问题是这个样子的：
----有一个大盒子，里面有两个小盒子，我想把左边的文字垂直居中，然后右边是一个表单。
但是vertical-aligh:middle不知道为什么不起作用，line-hight设置的跟盒子一样高的话还是会让文字跟在第二个图片的结尾处开始

    <div class="box-test">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

.box-test{
    width: 500px;
    height: 200px;
    background: black;
    margin: 0 auto;
}
.box1{
    width: 300px;
    height: 200px;
    background: pink;
    display: inline-block;
}
.box2{
    width: 100px;
    height: 200px;
    background: red;
    display: inline-block;
    
}

这是原始的样子

img

加上文字的话就回变成这个样子

img

我想让这个文字在这个盒子里面居中，用vertical-align:middle的时候完全没有动静，然后如果用尝试用ine-hight:200(200是和盒子一样高的)进行居中垂直的话就会变成这个样子

img

各位，我实在不知道该用什么了，求告知！谢谢！

给box1加一个 float: left

.box1{
      float: left;
      width: 300px;
      height: 200px;
      background: pink;
      /* display: inline-block; */
      line-height: 200px;
    }

img

改成以下形式：

<!DOCTYPE html>
<html lang="en">

<head>
</head>
<style>
    .box-test {
        width: 500px;
        height: 200px;
        background: black;
        margin: 0 auto;
        display: flex;
    }

    .box1 {
        width: 300px;
        height: 200px;
        background: pink;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box2 {
        width: 100px;
        height: 200px;
        background: red;
        display: inline-block;

    }
</style>

<body>
    <div class="box-test">
        <div class="box1">
            居中了
        </div>
        <div class="box2"></div>
    </div>
</body>

</html>

img

绝对定位，flex布局，grid布局