Html 如何对齐两个div的中心

我想在网页的某个X和Y位置显示一个圆圈，然后在圆圈上方显示标题文本

我想要的是-文本的中心应该与圆的中心垂直匹配（Y）

即使在运行时文本长度增加，文本仍应居中

圆圈直径和文字长度是可变的

我尝试使用

文本居中对齐

，但未能实现

html-

<div id="par">
    <div id="txt">Some Text</div>
    <div id="circ"></div>
</div>

---

您应该使用

display:flex；弯曲方向：立柱；证明内容：中心。
也许此示例可以帮助您：


#标准杆{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：300px；
}
#文本{
显示：内联块；
文本对齐：居中；
背景色：红色；
}
#保监会{
宽度：100px；
高度：100px；
边界半径：50%；
背景颜色：绿色；
}

一些文本




一些文本一些文本一些文本一些文本一些文本一些文本
到目前为止您已经尝试过的内容。向我们展示您的代码。您好，请共享您当前的代码，以便我们更好地了解您试图通过flex box实现的目标，但请共享图片以获取更多信息
#par{
    text-align: center;
}

#txt{
    background-color: red;
}

#circ {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: green;
}