Html 在固定尺寸DIV的中间对齐跨度 我有一个固定大小的div，背景图像，我希望文本直接排列在中间。垂直和水平

我能做到水平对齐，但我一生都不能做到垂直对齐。我已经在这里看到了答案，但找不到任何适合固定大小div的答案

您可以看到跨度周围的蓝色边框。如果我能把它移到任何文本的中心（只要它不太大），我就会在那里

div{
背景图片：url(http://i.imgur.com/I86rTVl.jpg);
宽度：500px；
高度：300px；
边框：1px纯红；
}
跨度{
位置：绝对位置；
文本对齐：居中；
宽度：500px；
边框：1px纯蓝色；
字号：72px
}

小提琴测试

在众多可能的解决方案中，以下是一种现代的

flexbox

技术

检查浏览器兼容性表中的

div{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；/*垂直居中*/
背景图像：url（“http://i.imgur.com/I86rTVl.jpg");
边框：1px纯红；
高度：300px；
宽度：500px；
}
跨度{
/*位置：绝对；移除*/
空白：nowrap；/*避免文本换行*/
文本对齐：居中；
宽度：500px；
边框：1px纯蓝色；
字号：72px
}

小提琴测试

在众多可能的解决方案中，以下是一种现代的

flexbox

技术

检查浏览器兼容性表中的

div{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；/*垂直居中*/
背景图像：url（“http://i.imgur.com/I86rTVl.jpg");
边框：1px纯红；
高度：300px；
宽度：500px；
}
跨度{
/*位置：绝对；移除*/
空白：nowrap；/*避免文本换行*/
文本对齐：居中；
宽度：500px；
边框：1px纯蓝色；
字号：72px
}

小提琴测试

尝试好的旧表格/表格单元格技术。工作到IE9:）

div{
背景图片：url(http://i.imgur.com/I86rTVl.jpg);
宽度：500px；
高度：300px；
边框：1px纯红；
显示：表格；
}
跨度{
显示：表格单元格；
文本对齐：居中；
宽度：100%；
垂直对齐：中间对齐；
边框：1px纯蓝色；
字号：72px
}

小提琴测试

尝试好的旧表格/表格单元格技术。工作到IE9:）

div{
背景图片：url(http://i.imgur.com/I86rTVl.jpg);
宽度：500px；
高度：300px；
边框：1px纯红；
显示：表格；
}
跨度{
显示：表格单元格；
文本对齐：居中；
宽度：100%；
垂直对齐：中间对齐；
边框：1px纯蓝色；
字号：72px
}

小提琴测试

绝对定位

将父对象设置为

position:relative

时，将子对象的位置设置为top:50%，并将其平移回其自身高度的一半

div{
背景图片：url(http://i.imgur.com/I86rTVl.jpg);
宽度：500px；
高度：300px；
边框：1px纯红；
位置：相对位置；
}
跨度{
位置：绝对位置；
文本对齐：居中；
宽度：500px；
最高：50%；
左：0%；
转化：translateY（-50%）；
边框：1px纯蓝色；
字号：72px
}

小提琴测试

绝对定位

将父对象设置为

position:relative

时，将子对象的位置设置为top:50%，并将其平移回其自身高度的一半

div{
背景图片：url(http://i.imgur.com/I86rTVl.jpg);
宽度：500px；
高度：300px；
边框：1px纯红；
位置：相对位置；
}
跨度{
位置：绝对位置；
文本对齐：居中；
宽度：500px；
最高：50%；
左：0%；
转化：translateY（-50%）；
边框：1px纯蓝色；
字号：72px
}

小提琴测试

---

顺便说一句，我确实想要文本包装。但是删除那一行似乎效果不错。是的，如果你想包装文本，你可以删除那一行。我只是想和你的当前输出垂直对齐。接受这个答案，因为这是我最终使用的答案。但其他答案也很好！你知道哪些浏览器支持这个吗？我注意到它在个人电脑和手机上的safari上都不起作用。不确定版本。还没有尝试过IE，但在chrome和FFI上都可以使用。顺便说一句，删除这一行似乎效果不错。是的，如果您希望文本被包装，您可以删除这一行。我只是想和你的当前输出垂直对齐。接受这个答案，因为这是我最终使用的答案。但其他答案也很好！你知道哪些浏览器支持这个吗？我注意到它在个人电脑和手机上的safari上都不起作用。不确定版本。没有尝试过IE，但可以在chrome和FFI上使用如果使用此方法，对齐的元素有时会变得模糊，除非在parent:parent（本例中为div）上使用preserve-3d{-webkit transform style:preserve-3d；-moz transform style:preserve-3d；transform style:preserve-3d；}如果使用此方法，对齐的元素有时会变得模糊，除非在parent:parent（本例中为div）上使用preserve-3d{-webkit transform style:preserve-3d；-moz transform style:preserve-3d；transform style:preserve-3d；}

  div {
    background: url(http://i.imgur.com/I86rTVl.jpg) no-repeat;
    width:500px;
    height: 300px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}

span {

    border: 1px solid blue;
    font-size: 72px

}