多行文本水平垂直居中模型实现

    <div class="box3">
       <div class="text">多行文本水平居中实现原理:text-align,vertical-align继承</div>
    </div>

.box3 { line-height: 300px; text-align: center; background: rgb(63, 214, 121); height: 300px;}
        .box3 .text {  max-width:100%; display: inline-block; line-height: normal; text-align: left; vertical-align: middle; margin: 0;}

并没有垂直居中，请问是什么问题。具有内联元素文字居中特性，但是行高失效