1-单行居中，多行居左。

思维：

• 居中用到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

参考

有趣的CSS