单行居中，多行文字居左（有坑！注意）

方法：
父级：text-align:center;
子级：text-align:left;+ display:inline-block;

测试：

<div class="box">
    <div class="inner">
            小兔叽的测试本
    </div>
</div>

<style>
        .box{
            width: 400px;
            height: 300px;
            background-color: pink;
            text-align: center;
        }
        .inner{
            text-align: left;
            display: inline-block;
            font-size: 30px;
        }
</style>

测试结果：

为了保证正确，又换了数据测试。如下：

然后迷之尴尬的发现，没有自动换行。直接溢出了父元素。（手动黑人问号？？？）
查过之后才知道原因：浏览器将连续的英文或者数字当做一个长单词，对于长单词溢出，浏览器不会默认换行。

解决办法：

1. word-break:break-all;//允许在单词内换行
2. word-break:break-word;//允许长单词换行到下一行
3. 手动添加空格，分成短的字符串

测试图：

完美解决。
（如果有问题，可以指出来，今天也要一起努力~）