Css 如何使用Flexbox仅将容器中的子元素居中？

我有一个装有两个孩子的容器。第一个子元素是图标，第二个子元素是文本。我只想使用Flexbox将图标左侧与标题中心对齐

HTML代码和CSS代码：

.container{
显示器：flex；
背景色：#7D8F99；
宽度：100%；
高度：50px；
}
.头衔{
显示器：flex；
背景色：#9AADB8；
}
.图标{
显示器：flex；
背景色：#1AADA9；
}

偶像
文本

将

图标上的
位置：绝对
和
左：0
组合起来就可以了


.container{
显示器：flex；
证明内容：周围的空间；
背景色：#7D8F99；
宽度：100%；
高度：50px；
位置：相对位置；
}
.头衔{
背景色：#9AADB8；
}
.图标{
背景色：#1AADA9；
位置：绝对位置；
左：0；
}

偶像
文本
添加
页边距：0自动
到
。title
将解决此问题


.container{
显示器：flex；
背景色：#7D8F99；
宽度：100%；
高度：50px；
}
.头衔{
显示器：flex；
背景色：#9AADB8；
保证金：0自动；
}
.图标{
显示器：flex；
背景色：#1AADA9；
}

偶像
文本
好主意！但是，使用此方法时，
.title
稍微偏离中心。是的，但这取决于是否将元素居中于剩余空间或其父元素的中心。