Cosmin Dumitrache Cosmin Dumitrache - 1 year ago 80
HTML Question

Div full height of TD, with text vertically middle

I know this question was put several times here, but didn't find a proper answer. I managed a workaround to make div full height of td. But seems impossible to align the text in the middle vertically. Any idea how can I accomplish this? I would like it to be responsive. I mean to work on all devices. Thanks.

Small text
<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>

Answer Source

Without seeing any of your code, it's a little difficult to give you an exact answer. But my favorite method for solving this problem, especially for responsive solutions, (as long as you don't need to support anything below IE9) is the following:

.text-container {
  position: relative;

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

If it also needs to be centered horizontally, use the following addition and replace the transform properties:

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

Here's the fiddle to show the final fully centered result.

Edit: updated fiddle with position relative, to fill space.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download