标题居中-两边有图标-flex.css

.container{
  width: 500px;
  display: flex;
  flex-direction: column;
  background: yellow;
}
.container-eachline{
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  margin-bottom: 10px
}
.container-eachline div:first-child{
  flex: 1;
}
.container-eachline div:first-child img{
  float: right;
}
.container-eachline div:last-child{
  flex: 1
}
img{
  width:20px;
}
.title{
  padding-left: 10px;
  padding-right: 10px;
}

标题居中-两边有图标-flex.html

<div class="container">
  <div class="container-eachline">
    <div>
      <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/>
    </div>
    <div class="title">
      标题
    </div>
    <div>
      <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/>
    </div>
  </div>
  <div class="container-eachline">
    <div>
      <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/>
    </div>
    <div class="title">
      标题标题
    </div>
    <div>
      <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/>
    </div>
  </div>
  <div class="container-eachline">
    <div>
      <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/>
    </div>
    <div class="title">
      标题标题标题标题
    </div>
    <div>
      <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif"/>
    </div>
  </div>
</div>

参考前端布局神器display:flex - 青春时光 - 博客园

效果

工具 HTML/CSS/JS 在线工具 | 菜鸟工具

参考行内垂直居中实践不行，因为img会在基线之上向上溢出

标题居中-两边有图标-line-height.css