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

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

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

例子：

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

您可以尝试以下基本方法：

第二部分{高度：100px；线条高度：100px；文本对齐：居中；边框：2px虚线#f69c55；}＜div＞你好，世界！</div>

但它只适用于单行文本，因为我们将行的高度设置为与包含框元素相同的高度。

更通用的方法

这是垂直对齐文本的另一种方式。此解决方案适用于单行和多行文本，但仍需要固定高度的容器：

第二部分{高度：100px；线条高度：100px；文本对齐：居中；边框：2px虚线#f69c55；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>你好，世界</span></div>

CSS只是调整＜div＞的大小，通过将＜div＞线的高度设置为等于其高度来垂直居中对齐＜span＞，并使＜span＞成为具有垂直对齐：中间的内联块。然后，它将＜span＞的线高度设置回正常值，因此其内容将在块内自然流动。

模拟表显示

这里还有另一个选项，它可能在不支持display:table和display:tablecell（基本上只有InternetExplorer7）的旧浏览器上不起作用。使用CSS，我们模拟表行为（因为表支持垂直对齐），HTML与第二个示例相同：

第二部分{显示：表格；高度：100px；宽度：100%；文本对齐：居中；边框：2px虚线#f69c55；}跨度{显示：表格单元格；垂直对齐：中间；}＜div＞<span>你好，世界</span></div>

使用绝对定位

该技术使用绝对定位的元素，将顶部、底部、左侧和右侧设置为0。这在《粉碎杂志》的一篇文章中有更详细的描述，《CSS中的绝对水平和垂直居中》。

第二部分{显示：柔性；对齐内容：中心；对齐项目：居中；高度：100px；宽度：100%；边框：2px虚线#f69c55；}＜div＞<span>你好，世界</span></div>

灵活的方法

第二部分{宽度：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＞

这是个更好的主意。你也可以这样做

身体html格式{高度：100%；}.父级{空白：nowrap；高度：100%；文本对齐：居中；}.父项：在之后{显示：内联块；垂直对齐：中间；高度：100%；内容：“”；}.居中{显示：内联块；垂直对齐：中间；空白：正常；}<div class=“parent”><div class=“center”><p>Lorem ipsum dolor坐amet</p＞</div></div>

作为答案被接受的解决方案是完美的，使用与div高度相同的行高度，但当文本被换行或是两行时，此解决方案无法完美工作。

如果文本被换行或在div中的多行上，请尝试此操作。

#box
{
  display: table-cell;
  vertical-align: middle;
}

有关更多参考信息，请参阅：

垂直居中多行文本CSS垂直居中的6种方法