Html 垂直集中内联块中的内容

我试图使蓝色文本垂直位于内联块div的中心。我试过各种各样的变化，但都没有用。父对象必须保持为内联块

如果父项显示为表格，子项显示为带有垂直对齐：中间的表格单元格，那么它几乎可以工作，但是失败了，因为子div是100%高的，我想在顶部和底部添加一个边框，填充大约10px，这在100%高的情况下不起作用。无法使用display:flex，因为它会破坏其他元素的定位。线条高度也会失败

谁能解释一下这里的问题是什么，因为我很困惑

.匹配容器{ 填充顶部：50px； } .比赛{ 宽度：25%； 高度：250px； 显示：内联块； 边框：1px纯黄色； } .匹配内容{ 背景：蓝色； 边框顶部：1px纯红； 边框底部：1px纯红； } .a{ 背景：黑色 } 顶部和底部有边框的中心文本 顶部和底部有边框的中心文本 将此属性添加到。匹配内容

您的代码正在按预期工作…没有添加属性以使蓝色框垂直居中

这是一个片段

.匹配容器{ 填充顶部：50px； } .比赛{ 宽度：25%； 高度：250px； 显示：内联块； 边框：1px纯黄色； } .匹配内容{ 背景：蓝色； 边框顶部：1px纯红； 边框底部：1px纯红； 位置：相对位置； 最高：50%； 转化：translateY-50%； } .a{ 背景：黑色 } 顶部和底部有边框的中心文本 顶部和底部有边框的中心文本 将此属性添加到。匹配内容

您的代码正在按预期工作…没有添加属性以使蓝色框垂直居中

这是一个片段

.匹配容器{ 填充顶部：50px； } .比赛{ 宽度：25%； 高度：250px； 显示：内联块； 边框：1px纯黄色； } .匹配内容{ 背景：蓝色； 边框顶部：1px纯红； 边框底部：1px纯红； 位置：相对位置； 最高：50%； 转化：translateY-50%； } .a{ 背景：黑色 } 顶部和底部有边框的中心文本 顶部和底部有边框的中心文本 您可以在此处使用display:inline flex和align items:center。演示：

.匹配容器{ 填充顶部：50px； } .比赛{ 宽度：25%； 高度：250px； /*成为内联flex容器*/ 显示：内联flex； /*中心项目*/ 对齐项目：居中； 边框：1px纯黄色； } .匹配内容{ 背景：蓝色； 边框顶部：1px纯红； 边框底部：1px纯红； } .a{ 背景：黑色 } 顶部和底部有边框的中心文本 顶部和底部有边框的中心文本 您可以在此处使用display:inline flex和align items:center。演示：

.匹配容器{ 填充顶部：50px； } .比赛{ 宽度：25%； 高度：250px； /*成为内联flex容器*/ 显示：内联flex； /*中心项目*/ 对齐项目：居中； 边框：1px纯黄色； } .匹配内容{ 背景：蓝色； 边框顶部：1px纯红； 边框底部：1px纯红； } .a{ 背景：黑色 } 顶部和底部有边框的中心文本 顶部和底部有边框的中心文本

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