Html 如何将下拉导航菜单居中？

我试图找出如何将整个

元素重新定位到屏幕的中心，但是每次我尝试一种新方法时，下拉项都会因为稍微向右移动或相互重叠而变得混乱

有没有人能帮我一把，让我知道我做错了什么，并给我一些建议让事情变得容易一点

这就是我的工作

html，
身体{
边际：0px；
填充：0px；
}
.菜单ul{
/*这是空白的，因为我试过的都不管用*/
}
保险商实验室{
列表样式：无；
字体系列：草书；
保证金：0；
填充：0；
}
ulli{
浮动：左；
显示：块；
高度：50px；
宽度：200px；
背景颜色：浅灰色；
}
ullia{
显示：块；
颜色：黑色；
文字装饰：无；
线高：50px；
文本对齐：居中；
}
悬停{
背景颜色：浅蓝色；
}
ulli ulli{
显示：无；
}
ul li：悬停ul li{
显示：块；
}

试验

---

将此代码添加到您的UL标签中，它应该将整个内容居中

如果您希望它始终居中，请选择%而不是px感谢提示我主要使用px，因为我比%更了解它，但我将努力使用%更多的TENPX只在屏幕上显示像素不显示屏幕的整个长度。例如，100%是整个屏幕长度。因此，如果你想分割5个导航条（理论上），20%的导航条将使每个导航条的屏幕大小达到20%，即屏幕大小的五分之一。这很有用，因为无论屏幕大小如何，它都可以让您“控制”内容。这很有帮助，感谢您的解释！使用%显然更有效，我使用px值的想法肯定是错误的。谢谢你的帮助！

ul {
  display: flex;
  justify-content: center;
}