结合绝对位置和居中文字

我在div中放置3个单独的文本元素时遇到问题。

这是我想要实现的

任务，简化了：

1. 无论中间有多宽，中间的数字都必须居中。（自动居中）
2. 下面的数字必须在左侧
3. 下面的字母必须在右边

我的想法：

1. 在中心为数字创建育儿容器
2. 放置一个包含数字的图块元素，该数字也会根据需要自动居中
3. 对内的其他元素进行绝对定位.ioitem。

我用下面的代码

<div class="ioitem ioitem1">
    <div class="numberContainer">
        <div class="number">1</div>
        <div class="width">3</div>
        <div class="base">D</div>
    </div>
</div>

款式

.ioitem {
    display: inline-block;
    background-color: white;
    height: 30px;

    margin: 0px 10px 10px 0px;
    padding: 0px 0px 0px 0px;

    position: relative;
}
.ioitem1 {  width: 30px; }
.ioitem > .numberContainer {
    font-size: 12px;
    font-weight: bold;

    position: absolute;
    top: 0;
    left: 0;
}
.ioitem > .number {
    display: block;
    margin: auto;
    text-align: center;
}

我得到的是这个烂摊子：

居中的数字不是居中，并且几乎没有放置任何东西，正如我希望的那样。为了简洁起见，我省略了一些CSS。

拜托，我怎么能得到想要的结果？步骤列表就足够了。

使我头疼的是使.number´文本自动居中。