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

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

后果

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

满足所有垂直对齐需求！

声明此Mixin：

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在元素中：

.element{
    @include vertical-align();
}

另一种方式：

不要设置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中。

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

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

较新的浏览器现在支持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；”。

.element{position: relative;top: 50%;transform: translateY(-50%);}

将此小代码添加到元素的CSS属性中。太棒了。试试看！