Văn bản được xoay ở giữa theo chiều dọc với CSS

Tôi có HTML sau:

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

div.outerlà một dải hẹp dọc. div.innerđược xoay 90 độ. Tôi muốn dòng chữ "Căn giữa?" để xuất hiện ở giữa trong div vùng chứa của nó. Tôi không biết trước kích thước của một trong hai div.

Điều này kết thúc: http://jsfiddle.net/CCMyf/2/ . Bạn có thể thấy từ jsfiddle rằng văn bản được căn giữa theo chiều dọc trước khi transform: rotate(-90deg)kiểu được áp dụng, nhưng hơi lệch sau đó. Điều này đặc biệt đáng chú ý khi div.outerngắn.

Có thể căn giữa văn bản này theo chiều dọc mà không cần biết trước bất kỳ kích thước nào không? Tôi không tìm thấy bất kỳ giá trị transform-originnào giải quyết được vấn đề này.

Điều quan trọng là đặt vị trí trên cùng và sang trái thành 50%, sau đó chuyển đổiX và chuyển đổiY thành -50%.

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

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

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

Có thể hơi muộn để trả lời câu hỏi đó, nhưng tôi tình cờ gặp vấn đề tương tự và tìm ra cách đạt được nó, bằng cách thêm một div khác.

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

và áp dụng một text-align: centertrên phần tử giữa đó, cùng với một số công cụ định vị:

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

Nó .innercũng nhận được một display: inline-block;để kích hoạt cả hai rotatevà text-alignthuộc tính.

Đây là fiddle tương ứng: http://jsfiddle.net/CCMyf/47/

Bạn có thể thêm margin: 0 auto;vào lớp "xoay" của mình để căn giữa văn bản.

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

Câu trả lời từ 'bjnsn' là tốt nhưng không hoàn hảo vì nó không thành công khi văn bản chứa khoảng trắng trong đó. Ví dụ, anh ấy sử dụng 'Căn giữa?' dưới dạng văn bản nhưng nếu chúng tôi thay đổi văn bản thành giả sử 'Căn giữa? hoặc không 'thì nó sẽ không hoạt động tốt và sẽ chiếm dòng tiếp theo sau dấu cách. Ther không phải là chiều rộng hoặc chiều cao được xác định cho khối div bên trong.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Nhưng chúng ta có thể làm cho toàn bộ văn bản được căn giữa đúng cách, bằng cách đặt chiều rộng của div bên trong bằng chiều cao của div ngoài, chiều cao dòng của div bên trong bằng chiều rộng của div bên ngoài div và thiết lập thuộc tính display flex cho bên trong div với các thuộc tính align-items: center và 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');
});

cập nhật fiddle https://jsfiddle.net/touqeer_shakeel/cjL21of5/

Một tùy chọn khác để xoay văn bản 90 độ và căn giữa trên trục Y là:

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

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

Ví dụ: https://codepen.io/wwwebman/pen/KKwqErL

Nhưng do hỗ trợ kém trong IE / EDGE writing-modeKHÔNG hoạt động ở đó: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Loại bỏ: margin-top: -7px;từ .innerlàm cho văn bản được xoay theo chiều dọc được căn giữa cho tôi. Nó cũng làm cho văn bản ngang không được căn giữa.

Chỉ cần loại bỏ mã trên?

Bạn có thể thêm cái này:

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

Về .on('change')chức năng của bạn , như bạn có thể thấy ở đây: http://jsfiddle.net/darkajax/hVhbp/