Vertically center text on page - html

Question

I'm having trouble to get a div (or the text inside) to get on the vertical center. Normally I have no trouble getting a div to be a certain percentage from the top of a page, but in some weird way, the % part gets completely ignored.
Here's a Fiddle
It's a very dumbed down version of my project, but it still screws up with the margin-top.
The result I'm aiming for is having the big text in the vertical middle of the page at all times. I have a feeling I'm actually approaching this completely wrong.
HTML
<div class="col-md-12 top-text">
<span class="top-title">Billetten <br /> Tjekliste</span>
</div>
CSS
.top-text {
text-align: center;
color: #000;
height: 10px;
margin-top:50%;
}
span.top-title {
font-family: 'art', helvetica, arial, sans-serif;
font-size: 180px;
line-height: 1em;
display: inline-block;
-webkit-transform: rotate(-10deg) skew(-10deg, 0);
-moz-transform: rotate(-10deg) skew(-10deg, 0);
-ms-transform: rotate(-10deg) skew(-10deg, 0);
-o-transform: rotate(-10deg) skew(-10deg, 0);
transform: rotate(-10deg) skew(-10deg, 0);
}

Answer 1

What I usually do to center stuff vertically, is set their position to absolute, give it a top value of 50% and then drag them up again by translating them with a negative 50% (referred to their own width).
Here's a fiddle: http://jsfiddle.net/y1muc7gr/1/
span.top-title {
font-family: 'art', helvetica, arial, sans-serif;
font-size: 180px;
line-height: 1em;
display: block;
position: absolute;
top: 50%;
width: 100%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
-moz-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
-ms-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
-o-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
}

Answer 2

You are forgetting to minus the half text's height.
http://jsfiddle.net/y1muc7gr/2/
.top-text {
text-align: center;
color: #000;
height: 10px;
margin-top:-180px;
position: absolute;
top : 50%;
}

Answer 3

is that what you want?
i have make this jsfiddle
add position:relative in top-title
and bottom:200px; change it according to your desired position
span.top-title {
position:relative;
font-family: 'art', helvetica, arial, sans-serif;
font-size: 180px;
line-height: 1em;
display: inline-block;
-webkit-transform: rotate(-10deg) skew(-10deg, 0);
-moz-transform: rotate(-10deg) skew(-10deg, 0);
-ms-transform: rotate(-10deg) skew(-10deg, 0);
-o-transform: rotate(-10deg) skew(-10deg, 0);
transform: rotate(-10deg) skew(-10deg, 0);
bottom:200px;
}
http://jsfiddle.net/y1muc7gr/5/

Answer 4

jsfiddle example
setting the container with table-cell you can give it the vertical align properties to center the text inside.
.top-text {
text-align: center;
color: #000;
height: 600px;
display: table-cell;
vertical-align: middle;
}
the only problem is that you should have a fixed height container.