Html Div TD的全高，文本垂直居中

我知道这个问题在这里被提了好几次，但没有找到正确的答案。我设法解决了一个问题，使div达到td的全高度。但是在垂直方向上对齐文本似乎是不可能的。你知道我该怎么做吗？我希望它是响应性的。我想在所有设备上工作。谢谢

<tr>
    <td>
        Small text
    </td>
    <td class="" style="height: 1px; height: 100%">
        <div style="position: relative">
            <span class="centered-text"> A very long text that I want to be centered inside parent div and of course parent td.</span>
        </div> 
    </td>
</tr>

小文本
一个很长的文本，我想在父div中居中，当然还有父td。

尝试将以下CSS添加到您的div中：

div{
    display: table-cell;
    vertical-align: middle;
}

显示属性将使div的行为更像表格单元格，这意味着垂直对齐样式将产生效果

---

示例：

在没有看到任何代码的情况下，给您一个准确的答案有点困难。但我最喜欢的解决这个问题的方法，尤其是对于响应性解决方案（只要您不需要支持IE9以下的任何内容），是：

.text-container {
  position: relative;
}

.centered-text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

如果还需要水平居中，请使用以下添加项并替换变换特性：

.centered-text {
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

编辑：使用相对位置更新，以填充空间-显示最终完全居中结果。

使用内联CSS

style="display:table-cell;vertical-align: middle;"

您可以在表格中设置

td

的高度，如下所示

style="display:table-cell;vertical-align: middle;  height:200px;"

例如：

<tr>

<td  style="display:table-cell;vertical-align: middle;">
    <h1>some text</h1>
</td>

<td>
    <img src="imagepath.jpg" height="100" width="100"
</td>

</tr>

一些文本

谢谢你的提示。我试过这个，但显示：表单元格不允许我的div与父TD的高度相同。抱歉，我的误解！如果您希望保持div高度，我会选择与上面@ghost_dad提供的解决方案类似的解决方案。在父容器中显示相对文本，使用“top”垂直对齐：）。div{height:100%；}使您的div填充整个真值元素。你在这里发短信会更容易是的，我在想这个。但我需要一个边界，将应用一些保证金。所以这并不能让我快乐。或者是否可以在td内部应用一些像素？我不这么认为。谢谢。我通常避免绝对位置，但这次我对这个解决方案很满意。干杯，没问题！我大体上同意。我通常的经验法则是，只要流中有一个相对的父对象，就可以安全地使用绝对定位。如果文本中心很长，则与父容器重叠。父td没有增加。我用html更新了这个问题。是的，这很有意义，因为文本元素没有填充任何空间。文本是动态的吗？你是在这篇文章中添加了html还是创建了一个新的？我已经更新了上面的提琴，所以文本容器实际上是相对的（这适用于顶部定位，但不适用于左和右）。是的。它将是动态的。对我来说，这可能不是什么大问题。我的文章不是很长，但我有点完美主义，想涵盖所有的情况。