Centrar verticalmente texto girado con CSS

Tengo el siguiente HTML:

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

div.outeres una franja vertical estrecha. div.innerse gira 90 grados. Me gustaría el texto "Centrado?" aparecer centrado en su contenedor div. No sé el tamaño de ninguno de los div de antemano.

Esto se acerca: http://jsfiddle.net/CCMyf/2/ . Puede ver en jsfiddle que el texto está centrado verticalmente antes de transform: rotate(-90deg)que se aplique el estilo, pero está algo desplazado después. Esto es particularmente notable cuando div.outeres corto.

¿Es posible centrar este texto verticalmente sin conocer ninguno de los tamaños de antemano? No he encontrado ningún valor transform-originque resuelva este problema.

La clave es establecer la posición superior e izquierda al 50% y luego transformX y transformY a -50%.

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

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

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

Puede que sea un poco tarde para responder esa pregunta, pero tropecé con el mismo problema y encontré alguna forma de lograrlo, agregando otro div en el camino.

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

y aplicando un text-align: centeren ese elemento del medio, junto con algunas cosas de posicionamiento:

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

El .innertambién recibe una display: inline-block;para permitir rotatey text-alignpropiedades.

Aquí está el violín correspondiente: http://jsfiddle.net/CCMyf/47/

¿Puedes agregar margin: 0 auto;a tu clase "rotar" para centrar el texto?

.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;
}

La respuesta de 'bjnsn' es buena pero no perfecta, ya que falla cuando el texto contiene espacio. Por ejemplo, usó 'Centrado?' como texto, pero si cambiamos el texto para que supongamos '¿Centrado? o no ', entonces no funcionará bien y ocupará la siguiente línea después del espacio. No hay ancho ni alto definido para el bloque div interno.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Pero podemos hacer que todo el texto centrado se alinee correctamente, estableciendo el ancho div interno igual a la altura del div externo, la altura de la línea del div interno igual al ancho del div externo div y estableciendo la propiedad display flex para el div interno con las propiedades align-items: center y justify-content: center.

.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');
});

violín actualizado https://jsfiddle.net/touqeer_shakeel/cjL21of5/

La otra opción para rotar el texto 90 grados y centrarlo en el eje Y es:

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

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

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

Pero debido al mal soporte en IE / EDGE writing-modeNO funciona allí: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Eliminando: margin-top: -7px;de .innerhecho el texto girado verticalmente centrado para mí. También hizo que el texto horizontal no estuviera centrado.

¿Simplemente eliminar el código anterior?

Podrías agregar esto:

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

A su .on('change')función, como puede ver aquí: http://jsfiddle.net/darkajax/hVhbp/