父元素设置为 text-align: center ，子元素设置 display 属性为 inline-block ，同水平居中 inline 元素是一样的道理。 - 在线编辑器

CSS 布局
CSS水平，垂直居中的11个场景
父元素设置为 text-align: center ，子元素设置 display 属性为 inline-block ，同水平居中 inline 元素是一样的道理。

          <style>
  .parent-2 {
    background: green;
    text-align: center; /* 使下级元素居中 */
  }

  .parent-2 div {
    display: inline-block; /* 使块级元素在同一行 */
    text-align: left;
    background: black;
    color: white;
    padding: 15px;
    max-width: 125px;
    margin: 5px;
  }
</style>

<div class="parent-2">
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一行水平居中。
  </div>
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一行水平居中。我有着更多的内容。
  </div>
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一行水平居中。
  </div>
</div>

        