Html 将字母放置在彼此上方/将字母居中放置在容器中？

我需要显示一个链接中的一个字母在另一个字母上，并希望它们居中。我尝试过position：相对和绝对，但不可能将字母居中

有什么想法吗？我希望他们完全是一对一，不要问我为什么：）

代码如下：

<a href="#">
    <span>O</span>
    <span>B</span>
</a>

我只知道父链接的宽度，但不知道给定字母的宽度

以下是播放宽度的代码：

编辑

下面是一个示例，说明它应该是什么样子（它不居中，如果我不知道这些跨距的宽度，我就不能使用负边距）：

像这样的吗？

---

调整高度（线高度=高度的一半）和填充以放置字母。

对不起，我希望它们正好位于红色圆圈的中心，两个都在，这样其中一个就在后面。检查编辑：）谢谢你，我知道有简单的方法可以做到这一点，非常完美！正如一个改进：在这里你可以很容易地改变高度，宽度和线的高度，其余的自动调整。我希望字母准确地在同一个地点，在红色圆圈中间。检查编辑。谢谢

a {
    text-align: center;
    display: block;
    background-color: red;
    line-height: 50px;
    width: 50px;
    height: 50px;
    border-radius: 100px;

    position: relative;
}

a span {
    position: absolute;
    display: block;
    line-height: 50px;
    width: 50px;
    height: 50px;
}