Html CSS：如何使用动态宽度将div放置在中心

我有一个弹出窗口，它位于屏幕中央，带有：

transform:translate（-50%，-50%）和
位置：绝对
。不幸的是，由于某些原因，我的宽度是固定的，它不是动态的（基于内容）

这是我的JSFIDLE：

为什么弹出窗口的宽度没有变大
 解决方案：

设置
.popup content{width:100%；}
并将您的内容嵌套在另一个div
display:table中；保证金：0自动


说明：

居中的div
.popup content
具有属性
left:50%
，这意味着它将保留其父项的左半部分为空。这意味着，div将其自身的宽度设置为其父级的所有剩余宽度，虽然将为50%

例如，如果将
.popup content
s width设置为
left:30%
，则它将使用其父级宽度的
70%

你的第二个css属性
transform:translate（-50%，-50%）仅移动整个div，而不更改（或影响）其宽度

CSS派生：

我猜您希望div只根据需要大，并且水平和垂直居中。如果是这样，这里有一个逐步解决方案：

由于css在垂直居中方面做得很好，您可以保持垂直，但只需将其宽度设置为100%：

.popup-content {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translate(0%, -50%);
}

接下来，您可以使用
display:table将内容嵌套在另一个div中，使其水平居中

.popup-center-horizontal {
  display: table;
  margin: 0 auto;
  background: red;
}

您可以在这里查看正在运行的演示

如果不希望div到达侧面，可以设置
max width
以限制其大小，例如：

.popup-center-horizontal {
   max-width: 90%;
}

适用于IE8+。
因为您为
.tabs
和
.tabs内容
提供了固定的宽度。即使只有没有任何html的文本，也不能很好地工作。使用
width
属性即可。例如：我知道宽度取决于设备，但在我的平板电脑上，屏幕末端和弹出窗口之间有很大的空间。如何将弹出窗口的宽度设置为最长元素的宽度：例如，可以将jQuery添加到代码中的标题？虽然：您希望div是水平和垂直对齐的，并且尽管要精确到显示其中内容所需的大小（而不是更大）？您可以尝试flexbox解决方案吗？看到这正是我想要的：）非常感谢你的大力支持！