子DIV不在父Div内垂直居中对齐

Question

我创建了一个带有height: 300px的div，在该div内还有另外两个display: inline-block的div。我想做的是让div垂直对齐中心。

我已经尝试过垂直对齐div，使用了flex框（但是如果我用margin: 0 auto进行包装，那么它实际上不起作用），也使用了line-height（问题是它不起作用）之所以这样，是因为我第二分区有文字。）

这是我的SCSS代码：

    .p-{
    &footer-class{
        height: 47px;
        background: transparent linear-gradient(270deg, #96A3B2 0%, #E9EDF4 100%) 0% 0% no-repeat padding-box;
        @include mq('sm'){
            padding: 0 25px 0 23px;
        }
        @include mq('xs') {
            padding: 0 25px 0 23px;
        }
        @include mq('xl') {
            // justify-content: left;
            // display: flex;
            // align-items: center;
            height: 267px;
           }
      }
   }

   .c-{
        &footer-social {
        float: left;
     }
   }

    .c-{
    &footer-about {
        float: right;
        @include mq('xs'){
            display: inline-block;
            margin-top: 4px;
        }
        @include mq('sm'){
            display: inline-block;
            margin-top: 4px;
        }
        @include mq('md'){
            display: inline-block;
        }
        @include mq('xl'){
            display: inline-block;
        }
    }
    &footer-text {
        display: block;
        color: #ffffff;
        font: bold 10px/20px "Consolas";
        opacity: 1;
        &1 {
            @include mq('xs'){
                display: inline-block;
                margin-top: 4px;
            }
            @include mq('sm'){
                display: inline-block;
                margin-top: 4px;
            }
            @include mq('md'){
                display: inline-block;
            }
            @include mq('xl'){
                display: none;
            }

        }
    }
  }

mq中的@include是在另一个文件中定义的媒体查询。