Wondering how a rotated text can be fixed in the center of the page?
Here is a jsfiddle, and I'm hoping I can accomplish this with CSS / html only.
Many thanks :)
HTML
<h1 class="main rotate">TEXT</h1>
CSS
h1 {
text-transform: uppercase;
white-space: nowrap;
text-align: center;
position: fixed;
left: 50%;
height: 100%;
width: 100%;
}
.rotate {
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
-ms-transform: rotate(-90deg) translate(-50%, 50%);
-o-transform: rotate(-90deg) translate(-50%, 50%);
transform: rotate(-90deg) translate(-50%, 50%);
}
My suggestion is to use good ol' top, right, bottom, left trick using margin: auto with the addition of 1em height and line-height. Like so:
h1 {
...
/* new code */
left:0;
right:0;
top:0;
bottom:0;
height: 1em;
line-height: 1em;
margin: auto;
}
.rotate {
/* new code */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}