Html 以未知宽度居中

我通常使用以下代码将具有动态宽度的元素居中

.horz-vert-center {
   position: absolute;
   left: 50%;
   top:50%;
   transform: translate(-50%,-50%);
 }

问题是元素的大小将比我想要的更早。当一个菜单仍然可以放在一行上时，它会变成两行：

我真的不明白这一点，如果我使用%值，为什么利润率不继续变小

此处演示： 添加空白：nowrap；在ul和显示器上：内联块；浮动：无；从表面上看，李似乎在耍花招

霍兹中心酒店{ 位置：绝对位置； 左：50%； 最高：50%； 转化：转化-50%，-50%； 空白：nowrap； } 霍尔茨中心酒店{ 显示：内联块； 浮动：无； } 正文{背景：ccc} *{边距：0；填充：0；字体系列：arial；字体大小：20px} ul{列表样式类型：无} li{float:左；margin right:10px} li:最后一个子{右边距：0；} 关于 工作 博客 杂志

---

这只是使用Theodore K.snippet的另一种方法

霍兹中心酒店{ 宽度：50%； 保证金：自动； 边框：1px 000实心； 文本对齐：居中； } 霍尔茨中心酒店{ 显示：内联块； 浮动：无； } *{边距：0；填充：0；} 关于 工作 博客 杂志

---

它对我来说很好。继续调整大小-它在应该的时候折叠。你可以给它一个显示值：inline flex？在我的控制台上-当它达到刚刚超过468px时，它就崩溃了。这是因为绝对位置设置为50%，文本和关联页边距的宽度刚刚超过234px。翻译使它看起来似乎应该适合，但实际上，所有这一切正在做的是将ul移到一边，而不是改变其宽度/边距。我会推荐这里发布的解决方案。或者使用margin:auto.right-因为元素保持50%的宽度，这不是我想要的。我希望我的元素居中，不管你现在做什么，RAP对我的例子有效。如果不是文本，我想它不会起作用。我如何以5%的利润率为中心？我猜我的代码是说，始终将元素保持在50%的宽度？如果删除宽度：50%，则有效。如果您处理的是非文本元素，则此选项不起作用。它现在可以满足要求，因为宽度为50%，文本将在问题中的代码行中折叠，并且不像问题中那样垂直居中。。。