This is independent of the content:

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ccc;
}
.content {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    text-align: center;
    -webkit-transform: translateY( -50% );
    -moz-transform: translateY( -50% );
    transform: translateY( -50% );
}

See the JSFiddle

Using the given example, the problem is in the element with the class content whose same does not have a defined height, which does not allow to calculate the center of the same.

Even when assigning a height, being an element with an absolute position, it is in a layer higher than the other elements, which means that the height of the element is not calculated according to the other elements.

Solution

One of the possible solutions is to tell the browser that the elements must assume the visual behavior of the tables:

HTML

<div class="container">
    <div class="content">
        <h1>Conteúdo</h1>
        <p>Subtítulo</p>
    </div>
</div>

CSS

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ccc;
    display:table;
}

.content {
    text-align: center;
    vertical-align:middle;
    display:table-cell;
}

See the JSFiddle

However, it is necessary to remove the position:absolute definition because it conflicts with the new display:table-cell definition, which in essence can not be positioned absolutely since it is always relative to the table where it is inserted .

Depending on the final objective, it can be applied to the element with the class content the definition position:relative in order to make it a container for other child elements.

This article describes a variety of ways to achieve this goal. For your particular case (element with absolute position) I would recommend the "stretch" method:

Place your element with all positions ( top , left , bottom and right ) as 0 . This will cause it to "stretch" to occupy the entire screen. But because it is smaller than the canvas, putting the margin as auto will make it fit the actual dimensions of the element.

.content {
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 50%;
    margin: auto;    
}

See the JSFiddle .

Note that it is necessary to specify a time for this method to work as expected.

Dude, to center both vertical and horizontal in this case ... you need to set the size of the element, and beyond the top: 50% use negative margin-top with half height element.

For example in your code:

.content {
    position: absolute;
    height:120px;
    margin-top:-60px;
    top: 50%;
    left: 25%;
    border:1px solid red;
    width: 50%;
    text-align: center;
}

If it's to centralize a DIV on a page, for now they have not created any way to do this, there are now 3 ways to do this:

I did the table-cell method until I discovered a better one:

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

Apply this to the element you want to center vertically. No height control is required on the parent element, much less on the desired element.

Remembering that my method is very similar to one posted here, but I'm using position: relative, rather than absolute.