Vertikal zentrierten gedrehten Text mit CSS

Ich habe folgendes HTML:

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

div.outerist ein schmaler vertikaler Streifen. div.innerwird um 90 Grad gedreht. Ich möchte den Text "Zentriert?" zentriert in seinem Container div erscheinen. Ich kenne die Größe beider Divs nicht im Voraus.

Dies kommt nahe: http://jsfiddle.net/CCMyf/2/ . Sie können an der jsfiddle erkennen, dass der Text vertikal zentriert ist, bevor der transform: rotate(-90deg)Stil angewendet wird, danach jedoch etwas versetzt ist. Dies macht sich besonders dann bemerkbar, wenn div.outeres kurz ist.

Ist es möglich, diesen Text vertikal zu zentrieren, ohne vorher eine der Größen zu kennen? Ich habe keine Werte gefunden transform-origin, die dieses Problem lösen.

Der Schlüssel besteht darin, die Position oben und links auf 50% und dann transformX und transformY auf -50% zu setzen.

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

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

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

Es mag etwas spät sein, diese Frage zu beantworten, aber ich bin auf dasselbe Problem gestoßen und habe einen Weg gefunden, es zu erreichen, indem ich ein weiteres Div in den Weg gestellt habe.

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

und Anwenden eines text-align: centerauf dieses mittlere Element, zusammen mit einigen Positionierungssachen:

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

Das .innerbekommt auch ein display: inline-block;, um sowohl rotateals auch text-alignEigenschaften zu aktivieren .

Hier ist die entsprechende Geige: http://jsfiddle.net/CCMyf/47/

Können Sie margin: 0 auto;Ihrer Klasse "Drehen" hinzufügen , um den Text zu zentrieren?

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

Die Antwort von 'bjnsn' ist gut, aber nicht perfekt, da sie fehlschlägt, wenn der Text Leerzeichen enthält. Zum Beispiel benutzte er "Zentriert?" als Text, aber wenn wir den Text geändert haben, um anzunehmen, dass 'Zentriert? oder nicht 'dann wird es nicht gut funktionieren und die nächste Zeile nach dem Leerzeichen nehmen. Für den inneren Div-Block ist weder Breite noch Höhe definiert.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Aber wir können den gesamten Text richtig ausrichten, indem wir die innere Div-Breite gleich der Höhe des äußeren Div und die Zeilenhöhe des inneren Div gleich der Breite des äußeren Div setzen div und Festlegen der Anzeigeflex-Eigenschaft für das innere div mit den Eigenschaften align-items: center und adjust-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');
});

aktualisierte Geige https://jsfiddle.net/touqeer_shakeel/cjL21of5/

Die andere Möglichkeit, den Text um 90 Grad zu drehen und auf der Achse Y zu zentrieren, ist:

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

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

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

Aber wegen der schlechten Unterstützung in IE / EDGE writing-modefunktioniert dort NICHT: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Entfernen: margin-top: -7px;von .innergemacht den vertikal gedrehten Text für mich zentriert. Außerdem wurde der horizontale Text nicht zentriert.

Einfach den obigen Code entfernen?

Sie könnten dies hinzufügen:

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

Zu Ihrer .on('change')Funktion, wie Sie hier sehen können: http://jsfiddle.net/darkajax/hVhbp/