将父元素改为 flex，并设置 justify-content: center; 即可实现居中 - 在线编辑器

          <style>
  .parent-3 {
    background: green;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .parent-3 div {
    background: black;
    color: white;
    padding: 15px;
    max-width: 125px;
    margin: 5px;
  }
</style>

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

        