是否可以居中嵌套块元素，如果是这样，如何？

我有一个最初未知宽度的元素，特别是用户提供的MathJax方程。我把元素设置为内联块，以确保元素的宽度适合其内容，并使其具有定义的宽度。但是，这阻止了传统的居中方法。也就是说，以下不起作用：

.equationElement { display: inline-block; margin-left: auto; margin-right: auto; }

解决scheme不能：

 .equationElement { display: block; width: 100px; margin-left: auto; margin-right: auto; }

因为我不知道宽度实际上应该是多less，如果用户点击方程，我需要整个方程突出显示，所以我不能将宽度设置为0.有没有人有一个解决scheme来集中这个方程？

只需设置text-align: center; 在容器上。

这是一个演示。

另一种方法来做到这一点（工作块元素也）：

 .center-horizontal { position: absolute; left: 50%; transform: translateX(-50%); }

说明：left：50％将从包含父元素的中心开始定位元素，所以您想用transform的一半宽度将其拉回 ：translateX（-50％）

注1：请务必将包含父项的位置设置为：relative; 如果父母绝对定位，则将100％宽度和高度，0填充和边距div放在其中，并将其赋予相对位置

注2：也可以修改垂直居中

 top:50%; transform: translateY(-50%);

有点晚，但类似于Ivek的答案，可以避免使用margin-left而不是left来使用position声明，所以：

margin-left: 50%; transform: translateX(-50%);