无法将 div 的动态内容居中对齐

Question

我正在开发一个使用flipclock.js的小柜台

我每两秒检查一次唯一访问者的数量，如果数量增加，计数器就会增加并翻转。早些时候，我使用的是在页面加载时从数据库中获取的单个值。我正在使用包含在中心标签中的 div，例如

<center> 
      <div id= "counter"> <?php echo $count;?</div>
</center>   

该值正好在 div 的中心。但是现在，由于我每 2 秒获得更新的用户数量，并且也使用了翻转时钟，所以该数字并没有在中心对齐。我可以通过使用 css 修改边距来对齐一个静态数字，但是当数字达到像 10000000 这样的大值时它看起来不太好。现在使用flipclock后，代码是

<div id="counter"  class="flip-clock-wrapper">
    <ul class="flip  play">
        <li class="flip-clock-before">
            <a href="#"><div class="up"><div class="shadow"></div><div class="inn">1</div></div><div class="down"><div class="shadow"></div><div class="inn">1</div></div></a>
        </li>
            <li class="flip-clock-active">
                <a href="#"><div class="up"><div class="shadow"></div><div class="inn">1</div></div><div class="down"><div class="shadow"></div><div class="inn">1</div></div></a>
            </li>
    </ul>

    <ul class="flip  play">
        <li class="flip-clock-before">
            <a href="#"><div class="up"><div class="shadow"></div><div class="inn">9</div></div><div class="down"><div class="shadow"></div><div class="inn">9</div></div></a>
        </li>

        <li class="flip-clock-active">
            <a href="#"><div class="up"><div class="shadow"></div><div class="inn">0</div></div><div class="down"><div class="shadow"></div><div class="inn">0</div></div></a>
        </li>
    </ul>
</div>

这看起来像

无论数字大小，我都希望它位于中心。数字是动态的，会随着时间而变化。

谢谢！

Answer 1

您可以使用transform 技巧将动态内容水平居中。 （还有其他方法可以做到这一点，但我认为这是最简单的——尤其是在使用你不熟悉的库时——就 CSS 而言）

如果将计数器 div 包装在容器 div 中，则可以应用以下 CSS：

position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

但是，由于它是绝对定位的，它会将元素从文档流中取出。
如您所见，下面的示例在不将元素从文档流中取出的情况下实现了相同的效果，但稍微复杂一些。

/*
  This becomes the same height as .container but spans the entire document
  so the content is pushed below the .container element.
*/
.container-outer {
  display: block;
  overflow: hidden;
}

/*
  This forcibly aligns its contents to the center of itself.
*/
.container {
  position: relative;
  float: left;
  
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* SAMPLE CONTENT - IGNORE */
.sample {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
}

<div class="container-outer">
  <div class="container">
    <div class="sample"></div>
  </div>
</div>

<!-- As you can see, this sample outside of the container is pushed below the centered element. -->
<div class="sample"></div>

编辑：CSS-Tricks 做了一个很棒的居中指南，您可以参考：
https://css-tricks.com/centering-css-complete-guide/