使用line-height+inline-block做多行文字的垂直居中

上图这段文字上下左右都是居中的。

我能想到得一般得做法就是中间块。left::50%.top:50%.然后通过margin-left和margin-top来稍微得调整。

效果的确也能实现。现在这里我们换个

<div class="box">
    <div class="content">
 数名消息人士证实，作为公司历史上第三次组织架构调整的后续动作之一，2018年12月内部员工大会后，腾讯开始裁撤一批中层干部（下简称“中干”）。腾讯中干主要包括助理总经理、副总经理、总经理级别，有时一些副总裁也被认为在中干范围内。
    </div>
</div>

.box {
    width: 700px;
    border: 1px solid #f00;
    margin: auto;
    line-height: 200px;
    text-align: center;
}

.box .content {
    display: inline-block;  //把块状元素转为行内元素
    height: auto;
    line-height: 26px;
    width: 400px;
    background: #ccc;
    vertical-align: middle;
    text-align: left;
}

如果只给box加样式效果是这样得200得行高。会让他变得特别高。还出现了滚动条。