Javascript CSS3垂直定心方法

目前，我发现了两种不同的垂直居中段落的方法

页脚{
高度：10公分；
位置：绝对；左侧：0；右侧：0；
颜色：白色；背景色：#333；
}
页脚>页脚{
背景颜色：浅蓝色；
}
footer.vcenter1{bottom:11em；变换样式：preserve-3d；}
footer.vCenter 2{底部：0；}
.vCenter 1>p{
保证金：0；
位置：绝对位置；
top:50%；transform:translateY（-50%）；
}
.vCenter 2{空白：nowrap；字间距：-.25em；}
.vCenter 2:before.vCenter 2>p{显示：内联块；垂直对齐：中间；}
.vCenter 2:在{内容：；高度：100%；}之前
.vCenter 2>p{空白：正常；字间距：正常；}

试验

测试文本
一些文字越来越多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。

第3行


测试文本
一些文字越来越多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。

第3行

据我所知，vCenter 1（使用位置和变换居中）在所有现代浏览器中都能完美工作

您也可以使用flexbox

页脚{
高度：10公分；
位置：绝对；左侧：0；右侧：0；
颜色：白色；背景色：#333；
}
页脚>页脚{
背景颜色：浅蓝色；
}
.vCenter 3{display:flex；justify content:center；align items:center；}
.vCenter 4{
高度：10公分；
线高：10em；
文本对齐：居中；
}
.vcenter4>p{
背景颜色：浅蓝色；
垂直对齐：中间对齐；
显示：内联块；
线高：正常；
}

试验

测试文本
一些文字越来越多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。

第3行


测试文本
一些文字越来越多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。还有更多的文字。。。

第3行

的可能重复-有远不止您上面提到的两种方法。不幸的是，Flexbox在IE9中不起作用，仍然有太多人在使用它而忽略它。如果您想要支持，那么您也不应该使用包含transform属性的方法。你也可以试试线高黑客