Html 如何在具有动态宽度的同时将div居中显示？

我有一个div，我希望它的宽度是动态的，基于div内部的文本。我发现，通过将div的显示设置为inline block，这是可能的；但是，现在我无法使div与显示屏居中。我不希望在div或html主体上使用text align:center，因为我不希望div中的文本居中。我愿意在使用或不使用内联块的情况下修复此问题。只要div居中，div宽度是基于文本的动态变化，那么我很高兴

<div id="wrapper">
    <p>Text that will change div width.</p>
</div>

---

您可以使用css内置变量em，并在每次编辑p元素时进行更新，如

//使用document.querySelector（#wrapper>p）更改p元素时
document.getElementById（“wrapper”）.style.width=document.querySelector（“#wrapper>p”）.innerHTML.length+“em”；

---

问题是每次编辑p元素时都必须插入该行代码。

以下是三种不同的方法：

div.container{
宽度：适合的内容；
保证金：0自动；
}
p、 内容{
背景色：rgb（100,0,0）；
颜色：白色；
显示：块！重要；
填充：10px；
}
p、 内容#固定宽度{
背景色：rgb（0,100,0）；
宽度：300px；
}
p、 内容#最大宽度{
背景色：rgb（0，0，100）；
最大宽度：55%；
}

有些文本无论您想要什么长度，此段落没有定义的宽度


不管你想要什么长度的文本，这个段落有一个定义的最大宽度


不管你想要什么长度的文本，这段文字都有固定的宽度

#包装器{
显示器：flex；
证明内容：中心；
}
#包装纸>p{
flex:0自动；
填充：10px；
背景色：#e8e8e8；
}

将更改div宽度的文本

显示：表格：页边距：自动；从副本中：请参见更新答案@gskn13

#wrapper {
    display: inline-block;
}