Centrer verticalement du texte pivoté avec CSS

Question

J'ai le HTML suivant :

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

div.outer est une étroite bande verticale. div.inner est tourné de 90 degrés. J'aimerais que le texte "Centré ?" apparaisse centré dans son conteneur div. Je ne connais pas à l'avance la taille de l'une ou l'autre des divisions.

Ceci s'en rapproche : http://jsfiddle.net/CCMyf/2/ . Vous pouvez voir dans le jsfiddle que le texte est centré verticalement avant la balise transform: rotate(-90deg) est appliqué, mais est quelque peu décalé après. Ceci est particulièrement visible lorsque div.outer est court.

Est-il possible de centrer ce texte verticalement sans connaître les tailles à l'avance ? Je n'ai pas trouvé de valeurs de transform-origin qui résolvent ce problème.

Answer 1

La clé est de définir la position top et left à 50% et ensuite transformX et transformY à -50%.

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

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

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

Answer 2

Il est peut-être un peu tard pour répondre à cette question, mais je suis tombé sur le même problème et j'ai trouvé un moyen de le résoudre, en ajoutant une autre division dans le chemin.

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

et en appliquant un text-align: center sur cet élément central, ainsi que des trucs de positionnement :

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

En .inner reçoit également un display: inline-block; pour permettre à la fois rotate y text-align propriétés.

Voici le violon correspondant : http://jsfiddle.net/CCMyf/47/

Answer 3

L'autre option pour faire pivoter le texte de 90 degrés et le centrer sur l'axe Y est la suivante :

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

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

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

Mais à cause du mauvais support dans IE/EDGE writing-mode n'y travaille PAS : https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Answer 4

Pouvez-vous ajouter margin: 0 auto; à votre classe "rotation" pour centrer le texte.

.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 5

La réponse de 'bjnsn' est bonne mais pas parfaite car elle échoue lorsque le texte contient un espace. Par exemple, il a utilisé 'Centered?' comme texte, mais si nous changeons le texte en 'Centered ? or not', cela ne fonctionnera pas correctement et prendra la ligne suivante après l'espace. Il n'y a pas de largeur ou de hauteur définie pour le bloc div interne.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Mais nous pouvons aligner correctement l'ensemble du texte centré, en définissant la largeur de la division interne égale à la hauteur de la division externe, la hauteur de ligne de la division interne égale à la largeur de la division externe et en définissant la propriété display flex pour la division interne avec les propriétés align-items:center et 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');
});

mise à jour du violon https://jsfiddle.net/touqeer_shakeel/cjL21of5/