如何在不添加额外容器的情况下，使div内内容居中且p元素左对齐？

以下是两种无需添加额外容器的解决方案，均能满足需求：

方案一：Table-Cell + Inline-Block 组合 #

利用表格单元格特性实现垂直居中，同时将P元素转为行内块，实现整体水平居中且内部文字左对齐：

div {
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

div p {
  display: inline-block;
  text-align: left;
  margin: 4px 0; /* 可根据需求调整P元素间的间距 */
}

对应的HTML保持不变：

<div>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum, lorem ipsum</p>
  <p>Lorem ipsum, foo</p>
</div>

方案二：Flex 布局（现代浏览器推荐） #

通过Flex布局更简洁地实现垂直+水平居中，同时控制P元素的对齐方式：

div {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向居中 */
  align-items: center; /* 水平方向让P整体居中 */
}

div p {
  text-align: left;
  margin: 4px 0;
  width: auto; /* 保持P宽度自适应内容，避免过度拉伸 */
}

说明 #

两种方案都不需要额外嵌套容器，仅通过CSS即可实现：

• 父Div保证所有P元素整体居中（水平+垂直）
• 每个P元素内部文字保持左对齐

内容的提问来源于stack exchange，提问作者stenuto