CSS的Flexbox布局

 怎么让这两个元素上下居中，左右居中呢

<span class="circle_of_friends">
<span class="friends_font">来自朋友圈</span>
<img src="/src/assets/img/clue/wx_friends_circle.png" alt="微信朋友圈" style="width: 10px;height: 10px;">
</span>

1. 我将.circle_of_friends的display属性设置为inline-flex，这允许该元素保持为行内元素，同时又能使用Flexbox布局。如果你希望它是一个块级元素，可以将其更改为flex。

2. align-items: center;用于垂直居中子元素，而justify-content: center;用于水平居中子元素。

3. vertical-align: middle;在<img>标签上可能不是必需的，因为Flexbox布局已经处理了垂直居中，但它通常用于处理非Flexbox布局中的行内元素对齐问题。