css3居中transform失效了？

Question

<div class="header">
    <span class="something">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</span>
</div>

.header {
    margin-top: 40px;
    width: 100%;
    height: 62px;
    position: relative;
    overflow: hidden;

    & > .something {
        font-size: 20px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

}

没用绝对定位前：

我本来想让这段文字根据自己的宽度居中
加了绝对定位后：

请问如何实现我的目的？谢谢。

Answer 1

因为你设置了left: 50%，所以默认的div宽度只剩下50%。
而正好内容是全部中文的，每一个字符中间都可以进行换行，所以就默认换行了。
设置css不允许换行即可。

Answer 2

display:block;
text-align:center