Jquery 无法在中间对齐div的动态内容

我正在一个使用

我每两秒钟检查一次唯一访客的数量，如果数量增加，计数器将增加并翻转。早些时候，我使用了一个值，该值是在加载页面时从数据库中提取的。我用的是一个中间带标签的div，比如

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

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

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

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

但是，由于这是绝对定位的，它将从文档流中删除元素。

如您所见，下面的示例在不将元素从文档流中删除的情况下实现了相同的效果，但稍微复杂一些


/*
这与.container的高度相同，但跨越整个文档
因此，内容被推到.container元素下面。
*/
.集装箱外部{
显示：块；
溢出：隐藏；
}
/*
这会强制将其内容与自身中心对齐。
*/
.集装箱{
位置：相对位置；
浮动：左；
左：50%；
-ms转换：translateX（-50%）；
-moz变换：translateX（-50%）；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
}
/*样本内容-忽略*/
.样品{
显示：块；
宽度：50px；
高度：50px；
背景色：#4CAF50；
}
非常感谢，第一个解决方案非常有效。
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);