思维：
- 居中用到text-align: center
- 居左是默认值，也就是text-align: left
- 通过在内层插入一个标签，让内层居左，并将p设置为display: inline-block
- 利用 inline-block 元素，可以被父级元素 text-align: center 居中
HTML
<div>
<h2><p>单行居中，多行居左</p></h2>
<h2><p>单行居中，多行居左,单行居中，多行居左单行居中，多行居左</p></h2>
</div>
CSS
div {
margin: 100px auto;
width: 400px;
height: 400px;
background: #ccc;
}
p {
display: inline-block;
text-align: left;
}
h2 {
text-align: center;
}
效果
1.png
