您可以通过添加以下CSS代码轻松完成此操作：

display: table-cell;
vertical-align: middle;

这意味着您的CSS最终看起来像：

#盒子{高度：90px；宽度：270px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；页边空白：20px；左边距：5px；显示：表格单元格；垂直对齐：中间；}<div id=“box”>一些文本</div>

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

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

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

例子：

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

无论您想要垂直居中样式，都可以尝试显示：表格单元格和垂直对齐：中间。

例子：

#盒子{显示：表格单元格；垂直对齐：中间；高度：90px；宽度：270px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；页边空白：20px；左边距：5px；}<div Id=“box”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。</div>

另一种方式：

不要设置div的height属性，而是使用padding:来实现效果。与行高度类似，它仅在您有一行文本时有效。尽管这样，如果您有更多的内容，文本仍然会居中，但div本身会稍微大一些。

因此，与其继续：

div {
  height: 120px;
  line-height: 120px;
}

你可以说：

div {
   padding: 60px 0; /* Maybe 60 minus font-size divided by two, if you want to be exact */
}

这会将div的顶部和底部填充设置为60px，左侧和右侧填充设置为零，使div高120像素（加上字体的高度），并将文本垂直居中放置在div中。

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

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