CSS在div中居中旋转文本

Question

我正在设置一个我已经传递给我的设计。

该设计要求将左对齐的 div (class=banner) 放置在外部 div 的左侧下方。

然后，此 div 将包含旋转文本 (-90deg)，该文本需要居中并在 div 中居中对齐。

问题是，这个文本可以有不同的高度，也可以有不同的长度和字体。

有没有一种方法可以更新我的 css 以确保文本始终位于其父 div 的中心？

.banner
{
    height:90%; 
    width:5%;
    padding:5%;
    text-transform: uppercase;
}

.rotated
{
    position:relative;
    float:left;
    top: 50%;
    left: 50%;
    height: 2px;
    margin-top: -1px;
    margin-left: -100%;
    text-align: center;
    display:inline-block;
    transform: translateX(-50%) rotate(-90deg);
    white-space: nowrap;
}

jsFiddle

Answer 1

只需添加：

display: flex;
justify-content:center;

到#Ticket 属性。 https://jsfiddle.net/yz3jL58y/1/