较新的浏览器现在支持CSS calc功能。如果您针对的是这些浏览器，您可能需要考虑这样做：

<div style=“位置：相对；宽度：400px；高度：400px，背景色：红色”><span style=“位置：绝对；行高：40px；高度：80px；文本对齐：居中；宽度：300px；溢出：隐藏；顶部：计算（50%-40px）；左侧：计算（50%-150px）；”>这里有两条线，即使父div改变大小，也会居中。</span></div>

关键是在绝对或相对定位的父除法中使用style=“top:calc（50%-[inerFixedHeightInPX/2]px）；height:[inerFixed HeightInPX；”。

.box｛宽度：100%；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}.高度{线条高度：170px；高度：170px；}.转换｛高度：170px；位置：相对；}.转换p{边距：0；位置：绝对；顶部：50%；左：50%；-ms变换：平移（-50%，-50%）；转换：转换（-50%，-50%）；}<h4>使用高度</h4><div class=“box height”>Lorem ipsum悲哀坐</div><hr/><h4>使用变换</h4><div class=“box transform”><p>Lorem ipsum悲哀坐</p></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中。

这是使用Flexbox的另一个选项。

#集装箱{显示：柔性；高度：200px；背景：橙色；}.儿童{边距：自动；}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠，尼莫</span></div></div>

后果

这里有一篇关于CSS居中的好文章。过来看。

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

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

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

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

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