Hello I am trying to vertically align some text but cant figure it out. Ive searched google and even the example I came across does not seem to be working and I have no idea why.
Here is my code:
<style type="text/css">
body {
background-color: #9E5A5B;
}
body,td,th {
font-size: 36px;
color: #000000;
}
.block-of-text p {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</head>
<body>
<section class="block-of-text">
<p>
Text I want vertically and horizontally centered.</p>
</section>
jsFiddle http://jsfiddle.net/0xvart2t/
If this isnt possible the way im trying to go about it maybe someone can give me a better example of how to accomplish what Im trying to accomplish. Thank you for your time.