Html 垂直对齐图像上的标题文本

如何将文本垂直对齐到标题的中间，标题的位置为绝对位置。我想要的文本，无论是1行或2行，它是在绿色块的中间。< /P> 以下是一个例子：

更新 像这样

我相信这个版本可能有

将

更改为

从

中删除

width: 100%;
display: table-cell;

margin-left: auto;
margin-right: auto;
transform: translateY(25%);

添加到

width: 100%;
display: table-cell;

margin-left: auto;
margin-right: auto;
transform: translateY(25%);

更改为

width: 100%;
display: table-cell;

margin-left: auto;
margin-right: auto;
transform: translateY(25%);

---

填充：5px10px-到-
填充：0px 10px
在
h4
样式上使用
行高
，其值大于
字体大小的两倍：

h4 {

    background: green;
    font-size: 1em;
    margin: 0;
    padding: 5px 10px;
    min-height: 50px; 
   line-height: 2.2em;

}

签出这个
你的意思是垂直对齐为中间吗？我知道怎么做，我只是在等待，直到我有空闲时间为你编码。待命…谢谢，我已经使用表格单元格和垂直对齐中间将其居中，但现在唯一的问题是，当使用表格单元格时，绿色框不是100%的宽度。谢谢你的解决方案，但在我的设计中，一些文本会缠绕到第二行，我更喜欢另一种方法，如显示：表格单元格；垂直对齐：中间对齐；但在使用绝对位置时，它似乎不起作用在您的情况下，我更喜欢
线高度
，并手动调整值。i、 e尝试和错误，即尝试它2.3 em，2.4 em等等，直到你得到所需的对齐。嘿，谢谢你的解决方案，但我正在寻找更像这样的东西。我似乎无法使文本居中，因为表格单元格使元素内联，而不是阻塞。@jezuitazus很抱歉延迟，我正在自己的服务器上使用该代码。JSFIDLE很酷，但也有点差劲。我发布的答案会有用的，我只是做了一个糟糕的解释。我将在一分钟内更新此处的答案，以使其更有意义，并提供代码的集成版本。@jezuitazus如果我的答案是您问题的正确解决方案，请单击此答案左侧的复选标记。此外，如果您发现我的答案有帮助，请单击向上箭头。谢谢：）对不起，我想我可能会把你弄糊涂了：（绿色框的位置应该在底部，但框内的文本不会同时垂直和水平对齐到中间。@jezuitazus使用新的小提琴进行了更新。在绿色栏上工作，使其仍然显示，但居中于黑色区域