动态居中图像中的文本

Question

我有一个容器div，其中高度和宽度设置为100%，位置是相对的。在div I内部，使用display:block和margin:auto将图像居中（图像小于div）。然后我尝试使用position:absolute，left:45%，top 82px将图像中的文本居中。垂直对齐看起来不错，但是随着文本中字符数量的增长，文本不再在中间对齐。因此，在我下面的图像中，如果文本为4个字符，文本将不再居中。有没有更好的方法来动态对齐文本？

html:

<div id="countup-container">
    <img id="countup-image" src="https://i.stack.imgur.com/9YqKE.png" alt="Accident Free Days">    
    <span id="ctl00" class="countup-text">101</span>    
</div>

相关CSS：

#countup-container {
    height: 100%;
    width: 100%;
    position: relative;
}

#countup-image {
    display: block;
    margin: auto;
    width: 300px;
    height: 240px;
}

.countup-text {
    z-index: 100;
    position: absolute;
    color: black;
    font-size: 40px;
    font-weight: bold;
    left: 45.3%;
    top: 82px;
}

Answer 1

如果我理解你，你可以简单地添加文本对齐：中心到你的#Countup-容器。

然后将左：45%删除到您的。倒计时文本

Answer 2

如果您使用绝对定位将其居中，您需要更改左侧：45% 至<代码>左侧：50% 然后设置如下转换：

.thing_to_center_horizontal {
    top 82px;
    left: 50%;
    transform: translateX(-50%);
}

这将使它成为动态内容的中心。

左：50%将根据内容的左上角将其放在中间，然后转换：translateX（-50%） 会将其移动到内容宽度的50%（这是动态部分）左侧，使其居中。

有道理？

但是也许一个简单的文本对齐：中心；可能会起作用，但是很难分辨，因为你没有发布任何代码。