Horizontally align text after CSS rotation

We can rotate¬†text with¬†transform: rotate(90deg) it’s not something new. But different length of text will have different position.

I was making website with vertical text in each block on page and text in blocks had different length. Result wasn’t right.

For normal position we need to add translateX() and translateY() to transform.

p {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
position: absolute;
top: 50%;
left: 50%;
}

Now we can control position of rotated text.

Download ZIP