Вертикально повернутий текст, повернутий за допомогою CSS

У мене є такий HTML:

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

div.outerявляє собою вузьку вертикальну смугу. div.innerповертається на 90 градусів. Я хотів би отримати текст "По центру?" щоб виглядати в центрі у своєму контейнері div. Я не знаю розмір будь-якого div заздалегідь.

Це наближається: http://jsfiddle.net/CCMyf/2/ . З jsfiddle видно, що текст вертикально відцентрований до застосування transform: rotate(-90deg)стилю, але дещо зміщений після. Це особливо помітно, коли div.outerкороткий.

Чи можна відцентрувати цей текст вертикально, не знаючи жодного розміру заздалегідь? Я не знайшов жодного значення, transform-originяке б вирішило цю проблему.

Ключовим моментом є встановлення верхнього та лівого положення до 50%, а потім transformX та transformY до -50%.

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

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

див .: http://jsfiddle.net/CCMyf/79/

Можливо, трохи пізно відповісти на це питання, але я натрапив на те саме питання і знайшов якийсь спосіб його досягнення, додавши ще один div на шляху.

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

і нанесення text-align: centerна цей середній елемент разом із деякими позиціонуючими матеріалами:

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

.innerТакож отримує display: inline-block;для того, щоб як rotateі text-alignвластивості.

Ось відповідна скрипка: http://jsfiddle.net/CCMyf/47/

Чи можете ви додати margin: 0 auto;до свого класу "обертати", щоб відцентрувати текст.

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

Відповідь від "bjnsn" хороша, але не досконала, оскільки не вдається, коли текст містить у ній пробіл. Наприклад, він використовував "По центру?" як текст, але якби ми змінили текст, щоб припустити "Відцентрований? чи ні ', тоді це не спрацює нормально і займе наступний рядок після пробілу. Для внутрішнього блоку div не визначено ширину чи висоту.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Але ми можемо зробити так, щоб текст повністю вирівнювався по центру, встановивши внутрішню ширину div, рівну висоті зовнішнього div, висоту рядка внутрішнього div дорівнює ширині зовнішнього div та встановлення властивості display flex для внутрішнього div з властивостями align-items: center і 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');
});

оновлена ​​скрипка https://jsfiddle.net/touqeer_shakeel/cjL21of5/

Іншим варіантом обертання тексту на 90 градусів і центру по осі Y є:

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

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

Приклад: https://codepen.io/wwwebman/pen/KKwqErL

Але через погану підтримку IE / EDGE writing-modeтам НЕ працює: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Видалення: margin-top: -7px;з .innerзроблено вертикально повернутий текст, відцентрований для мене. Це також зробило горизонтальний текст нецентрованим.

Просто видаліть наведений вище код?

Ви можете додати це:

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

До вашої .on('change')функції, як ви можете бачити тут: http://jsfiddle.net/darkajax/hVhbp/