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

绝对定位和拉伸

与上面的方法一样，首先将父元素和子元素上的位置分别设置为相对和绝对。从那里情况就不同了。

在下面的代码中，我再次使用了该方法来水平和垂直地居中子对象，尽管您只能使用该方法进行垂直居中。

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

此方法的思想是通过将上、下、右和左值设置为0，尝试使子元素延伸到所有四条边。因为我们的子元素比我们的父元素小，所以它不能到达所有的四条边。

然而，将自动设置为所有四边的边距会导致相反的边距相等，并将子div显示在父div的中心。

不幸的是，上面的方法在InternetExplorer7及以下版本中不起作用，并且像前面的方法一样，子div中的内容可能会变得太大，导致其被隐藏。

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

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

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

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

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

例子：

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

您还可以使用以下财产。

display: flex; 
align-content: center; 
justify-content : center;