Vertically center rotated text with CSS

Question

I have the following HTML:

    
Centered?

div.

Answer 1

The answer from 'bjnsn' is good but not perfect as it fails when the text contains space in it. For example he used 'Centered?' as text but if we changed the text to let suppose 'Centered? or not' then it will not work fine and will take the next line after space. Ther is not width or height defined for the inner div block.

.inner {
  font-size: 13px;
  font-color: #878787;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #DDD;
}

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ But we can make the whole text centered align properly, by setting the inner div width equal to height of the outer div, line-height of inner div equal to the width of the outer div and setting the display flex property for inner div with align-items:center and justify-content:center properties.

.inner {
  font-size: 13px;
  font-color: #878787;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content:center;
  align-items:center;
  line-height:40px;
}
$('#height').on('change', function(e) {
  $('.outer').css('height', $('#height').val() + 'px');
  $('.inner').css('width', $('#height').val() + 'px');
});

updated fiddle https://jsfiddle.net/touqeer_shakeel/cjL21of5/