我看到了前面的答案，它们只适用于屏幕的宽度（没有响应）。对于反应灵敏的用户，您必须使用flex。

例子：

div { display:flex; align-items:center; }

对于单行文本（或单个字符），可以使用以下技术：

当#box具有非固定的相对高度（以%为单位）时，可以使用它。

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

在JsBin（更容易编辑CSS）或JsFiddle（更容易更改结果框的高度）观看现场演示。

如果你想将内部文本放在HTML中，而不是CSS中，那么你需要将文本内容包装在额外的内联元素中，然后编辑#box:：after以匹配它。（当然，content:property应该被删除。）

例如<div id=“box”><span>文本内容</span></div>。在这种情况下，#box：：after应替换为#box span。

对于Internet Explorer 8支持，必须将：：替换为：。

我看到了前面的答案，它们只适用于屏幕的宽度（没有响应）。对于反应灵敏的用户，您必须使用flex。

例子：

div { display:flex; align-items:center; }

灵活的方法

第二部分{宽度：250px；最小高度：50px；线条高度：50px；文本对齐：居中；边框：1px实心#12346；边距底部：5px；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet</span></div>＜div＞

.text{
   background: #ccc;
   position: relative;
   float: left;
   text-align: center;
   width: 400px;
   line-height: 80px;
   font-size: 24px;
   color: #000;
   float: left;
 }

如果你不在乎它的视觉3D效果，就在button而不是div中设置它。

#盒子{高度：120px；宽度：300px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；}<button Id=“box”禁用>Lorem ipsum dolor坐amet，consectetur adipiscing elit。</按钮>