这个问题在这里已经有答案了：
如何使图元水平和垂直居中
（25个答案）
（25个答案）
如何在div中垂直对齐文本？
（33个答案）
（33个答案）
两年前关闭的
我有一个<；部门>元素，其中包含文本，我希望对齐此的内容<；部门>垂直居中
这是我的<；部门>样式：
\box{
高度：170px；
宽度：270px；
背景：#000；
字体大小：48px；
颜色：#FFF；
文本对齐：居中；
}<；div id=“box”>；
同侧阴唇
</部门>实现这一目标的最佳方式是什么
您可以尝试以下基本方法：
div{
高度：100px；
线高：100px；
文本对齐：居中；
边框：2个虚线#f69c55；
}<；部门>；
你好，世界！
</部门>但它只适用于单行文本，因为我们将行的高度设置为与包含框元素相同的高度
更灵活的方法
这是垂直对齐文本的另一种方法。此解决方案适用于单行和多行文本，但仍需要固定高度的容器：
div{
高度：100px；
线高：100px；
文本对齐：居中；
边框：2个虚线#f69c55；
}
跨度{
显示：内联块；
垂直对齐：中间对齐；
线高：正常；
}<；部门>；
<；span>；你好，世界</span>；
</部门>CSS只是调整<；部门>，垂直居中对齐<；span></通过设置<；部门>的行高度等于其高度，并使<；span>具有垂直对齐：中间对齐的内联块。然后，它将的线高度设置回正常值<；span>，因此其内容将在块内自然流动
模拟表显示
这里还有另一个选项，它可能不适用于不支持display:table和display:table cell（基本上只是Internet Explorer 7）的旧浏览器。我们使用CSS模拟表行为（因为表支持垂直对齐），HTML与第二个示例相同：
div{
显示：表格；
高度：100px；
宽度：100%；
文本对齐：居中；
边框：2个虚线#f69c55；
}
跨度{
显示：表格单元格；
垂直对齐：中间对齐；
}<；部门>；
<；span>；你好，世界</span>；
</部门>使用绝对定位
此技术使用绝对定位的元素将顶部、底部、左侧和右侧设置为0。在《粉碎》杂志的一篇文章《CSS中的绝对水平和垂直居中》中有更详细的描述
div{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100px；
宽度：100%；
边框：2个虚线#f69c55；
}<；部门>；
<；span>；你好，世界</span>；
</部门>