思维：

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

1-单行居中，多行居左。
思维：居中用到text-align: center 居左是默认值，也就是text-align: left 通过在...
单行居中显示文字，多行居左显示
代码飘起来...
CSS布局篇
1.单行时居中，多行时左对齐原理：父元素设置居中对齐，子元素设置为inline-block元素，当单行时，整个子...
居中
水平居中行内元素(单行/多行) 单行块级元素多行块级元素垂直居中单行行内元素 padding-top = ...
flex布局的常用方法
单行的时候文本不足会居中，多行会自动折行居左页面高度不足时，在底部显示；页面高度超出时，随页面滚动 flex的子...
单行居中显示文字，多行居左显示，最多两行超过用省略号结尾
题目就是如上要求，使用纯 CSS，完成单行文本居中显示文字，多行居左显示，最多两行超过用省略号结尾，效果如下：不...
css单行居中，两行居左，超过两行省略
这题就厉害了我的哥。题目就是如上要求，使用纯 CSS，完成单行文本居中显示文字，多行居左显示，最多两行超过用省略...
markdown插入表格
-（表格内容居左），:-（居左），-：（居右），:-：（居中）
2016-12-19
多行文本垂直居中单行文本居中方式：line-height但是多行文本使用 line-height 的话会出错，就...
大小不固定的图片和多行文字的垂直水平居中
大小不固定的图片和多行文字的垂直水平居中一、大小不固定，多行文字的垂直居中① 单行文字可能很多人都知道如何让单行文...