是否可以将 inline-block 元素居中，如果可以，如何？答案

【问题标题】：Is it possible to center an inline-block element and if so, how?是否可以将 inline-block 元素居中，如果可以，如何？
【发布时间】：2011-11-27 22:29:26
【问题描述】：

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

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

而解决办法不能是：

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

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

【问题讨论】：

顺便说一下，该页面上的 Chrome 注册似乎中断了。如果我单击注册按钮，无论是否使用 JavaScript，都不会发生任何事情。
令人着迷！我正在使用 Chrome，它对我来说很好用。您使用的是什么帐户类型？谷歌、脸书、推特？
myopenid。如果 JavaScript 关闭，我 100% 不会在谷歌浏览器中工作。该按钮甚至没有表单，也不是提交按钮。
啊，我明白了。我没有检查所有可能的登录。谢谢你的说明。否则，我永远不会知道。该应用程序严重依赖 Javascript，因此没有 JS 无法注册是可以的。但是，如果用户没有激活 JS，我应该在某处记下这一点。谢谢。
还有一件事：你的项目听起来很有趣，所以我访问了它的网站。 developer page 声明“Veda 项目是开源的，(...)”，但我找不到指向 github（或任何其他）存储库的链接。为什么不加一个？而且，没有冒犯，但是在项目实际上只是一张名片时有一个捐赠页面使它看起来像一个骗局。为什么捐款页面的国家预设为美国，而不是我的 IP 所在的国家？

标签： css mathjax

【解决方案1】：

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

Here's a demo.

【讨论】：

这是一个好主意，如果我设置display: block，它会起作用，但随后元素会占用其容器的宽度，或者我必须手动设置宽度，但我不知道宽度是多少。如果元素设置为inline-block 则不起作用。它需要为inline-block 的原因是它的宽度对其内容是动态的。谢谢你的好主意。如果您可以更改它以使其适用于inline-block，那将是完美的。
@Vivek Viswanathan 您能否详细说明为什么“如果将元素设置为内联块则不起作用”？向演示页面添加了link。
这似乎可行，因为在父元素上设置了text-align: center。但是，我不能在我的代码中这样做，因为 inline-block 元素具有无法居中的兄弟姐妹。再次感谢您对此的帮助。
@Vivek Viswanathan 好吧，你不能把公式单独打包到一个特殊的display:block; 容器中吗？该容器将占据 100% 的宽度，但这应该不是问题，不是吗？

【解决方案2】：

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

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

说明： left:50% 将从包含父元素的中心开始定位元素，因此您希望通过 transform: translateX(-50% 将其拉回宽度的一半)

注1：请务必将包含父级的位置设置为位置：相对；如果父级是绝对定位的，则在其中放置一个 100% 的宽度和高度、0 填充和边距 div 并给它位置：相对

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

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

【讨论】：

这个太棒了！
你不需要absolute定位，可以使用margin: 50%;
你不需要绝对，但是如果位置是static（默认元素的定位），左/右将不起作用。如果absolute 不是特别需要，您应该使用relative
希望这是被接受的答案，因为当前接受解释了如何将元素的内联内容居中。这解释了如何使特定的居中。
在某些情况下使用边距会产生溢出，在我的特定用例中，它是在元素宽度一半的距离处创建水平滚动条。使用位置解决了这个问题。

【解决方案3】：

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

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

【讨论】：

如果你想将多个环绕元素居中，只要有足够的空间呢？直觉上，我认为添加 margin-right: -50% 就可以了。但是，由于未知的原因，您对 -50% 的翻译似乎太多了。较小的翻译值可以接近产生居中的结果，但在 Chrome、Firefox 和 Edge 之间会有所不同。小提琴：jsfiddle.net/dgqs18wL/63

【解决方案4】：

您可以使用 max-content 来做到这一点：

.element {
  margin-inline: auto;
  width: max-content;
}

使用width: fit-content 也可以。

【讨论】：