Vertically center rotated text with CSS

Question

I have the following HTML:

    
Centered?

div.

Answer 1

Removing : margin-top: -7px; from .inner made the vertically rotated text centered for me. It also made the horizontal text not centered.

Just remove the above code?

Answer 2

The key is to set position top and left to 50% and then transformX and transformY to -50%.

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
}

.rotate {  
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

see: http://jsfiddle.net/CCMyf/79/

Answer 3

The another option to rotate text 90 degree and center on axis Y is:

.rotate-centered {
    top: 50%;
    right: 50%;
    position: absolute;
    transform: scale(-1) translate(-50%, 50%);
    writing-mode: vertical-lr;
 }

<span class="rotate-centered">Text<span>

Example: https://codepen.io/wwwebman/pen/KKwqErL

But because of bad support in IE/EDGE writing-mode does NOT work there: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Answer 4

It may be a bit late for answering that question, but I stumbled on the same issue and found some way of achieving it, by adding another div in the way.

<div class="outer">
    <div class='middle'><span class="inner rotate">Centered?</span></div>
</div>

and applying a text-align: center on that middle element, along with some positioning stuff:

.middle {
    margin-left: -200px;
    width: 400px;
    text-align: center;
    position: relative;
    left: 7px;
    top: 50%;
    line-height: 37px;
}

The .inner also gets a display: inline-block; to enable both rotate and text-align properties.

Here is the corresponding fiddle : http://jsfiddle.net/CCMyf/47/

Answer 5

Can you add margin: 0 auto; to your "rotate" class to center the text.

.rotate {
  -webkit-transform: rotate(-90deg);
  -ff-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 16px;  /* transform: rotate() does not rotate the bounding box. */
  margin: 0 auto;
}

Answer 6

You could add this:

$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height());

To your .on('change') function, as you can see here: http://jsfiddle.net/darkajax/hVhbp/