是否可以将内联块元素居中，如果是，如何？

Question

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

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

解决方案不能是：

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

因为我事先并不知道宽度应该是多少，如果用户点击等式，我需要突出显示整个等式，所以我不能将宽度设置为0.是否有人有解决方案来使这个等式居中？

Answer 1

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

Here's a demo

Answer 2

另一种方法（也适用于块元素）：

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

说明： left：50％将从包含父级的中心开始开始元素，因此您希望将其拉回其宽度的一半使用transform：translateX（-50％） ）

注1： 一定要将包含父级的位置设置为position：relative;如果父级是绝对定位的，则在其中放置100％的宽度和高度，0填充和边距div并给它位置：relative

注2：也可以使用

修改垂直居中

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

Answer 3

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

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