如何居中旋转文字？

Question

在当前情况下，旋转文本（270度）居中的最佳方法是什么？它目前处于相对位置，但它不是一个很好的解决方案。

HTML：

<div id="side" class="container">
  <p id="sidetext" >Work</p>
</div>
<div id="cont" class="container">
   <div id="row" class="row">
      Hey yeah!
   </div>
</div

和CSS：

#sidetext {
    font-family: "Josefin Sans";
    text-transform: uppercase;
    display: block;
    font-weight: 100;
    font-size: 1.7em;
    color: white;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    transform: rotate(270deg);
    position: relative;
    top: 216px;
    margin: 0 22px 10px;
}

Answer 1

你可以尝试这个css。

.tab-caption {
    position: absolute;
    top: 50%;
    height: 2px;  /* actual text will overlap! */
    margin-top: -1px;  /* subtract half the height */
    line-height: 0px;  /* centre the text on the base line */
    text-align: center;
    left: 50%; /* added */
    transform: translateX(-50%) rotate(90deg); /* added translateX */
    white-space: nowrap;
}