纯 CSS：垂直和水平居中绝对定位元素，其宽度取决于子元素

Question

所以...我得到了这个代码：https://jsfiddle.net/jmg63s3e/1/

如果您调整浏览器窗口的大小直到您将text 与image 内联，那么代码实际上可以正常工作，这就是我想要实现的目标，但如果您最终将其缩小，text 会下降到下面image 即使wrapper 宽度比窗口宽度小很多。

我唯一的目的是：

• 整个wrapper 在浏览器窗口中垂直和水平居中。它的总宽度和高度未知，取决于它的子节点
• row1 和 row2 不得内联：row2 必须低于 row1
• row1 内的所有元素（image 和 text 包含 2 个跨度）必须彼此内联
• 好吧，row2 内的 spinner 也必须在行内居中，但无论我尝试什么解决方案，这都不是问题

事实上，整个代码中唯一的动态元素是第一个跨度，在示例中包含Player #1，因为它应该是玩家的名字，它可以是任何长度。

当然，如果我想让它具有响应性，我将不得不使用媒体查询或使用 JS 动态更改宽度和高度以及字体大小，我愿意这样做。我的问题只有wrapper 本身和text 低于image，即使wrapper 宽度比窗口宽度小很多，所以我要求一个可以工作的解决方案因为wrapper 宽度小于窗口宽度。当wrapper 宽度低于窗口宽度时，我将使用响应式媒体查询或 JS 处理样式。我只想让wrapper 在窗口中垂直和水平居中，并且它的大小是动态的并且取决于子级。

我已经尝试过任何我能想到的解决方案，但是对于未知的wrapper 宽度，我就是想不通。有人能帮助我吗？我愿意接受任何建议和任何解决方案，只要它是纯 CSS 并且不涉及 JS。提前谢谢大家

Answer 1

您可以使用flexbox 来解决这些问题。

这是一个更新的小提琴，旧的 CSS 被注释掉了：https://jsfiddle.net/jmg63s3e/3/

首先，要水平和垂直对齐包装器，您需要使用display: flex 使父容器成为弹性容器，并使用justify-content: center 和align-items: center。您还需要设置一个高度，否则它将包裹到孩子的高度并且不会给您居中效果。我用了以下。高度可以是您需要的任何高度。

.trump-waiting {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  overflow: hidden;
  height: 100vh;
}

接下来，我在包装器上使用了display: flex 和flex-direction: column，以确保它们都按照我们希望的方式排列。

.trump-waiting .wrapper {
  display:flex;
  flex-direction:column;

为了修复 row1，我再次使用了 flexbox 并删除了内联块和设置的高度。只要您负责调整文本 div 中的字体大小，您就可以设置高度，例如媒体查询。否则，在明确高度的情况下，当前大小的字体将脱离其容器。如果不明确设置高度，容器将调整大小。

.trump-waiting .row1 {
  display: flex;
  flex-direction: row;
  /* display: inline-block; */
  /* height: 60px; */
  background-color: yellow;
}

我还在 .image 中添加了flex-shrink:0，以防止它在调整大小时缩小。

为了让玩家 #1 和“正在选择将牌套装”保持一致，我还在 .row 中添加了 display: flex 和 flex-direction: row，让它们保持在同一行。

最后，为了对齐加载器，我使用了上面使用的垂直/水平对齐技巧，并在 div 中添加了一些填充以给它一些空间并删除了旧的 css。

.trump-waiting .row2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 16px 0;
  /* display: block; */
  /* margin-top: 50px; */

最后一步是使用媒体查询来调整 .text 跨度上的字体大小，以便字体在调整大小时不会扩展其容器。

给猫剥皮的方法有很多，我相信其他人会有不同的可能更好的解决方案，但希望这会有所帮助。如果你需要的话，有一个很棒的 flexbox here 总结。我可能在这个摘要中遗漏了一个更改，但它应该都在小提琴中。

编辑： 意识到我在总结 jsfiddle 中的 css 时犯了一个错误，并且还删除了一个多余的 css 属性。现已更新。