Html 定位在CSS中，我需要下拉选项居中但向左缩进

下面的HTML需要合适的CSS使下拉链接居中但缩进。 看小提琴。

这可以使用position属性来完成-

将父元素设置为相对位置（这将为子元素创建容器） 将子元素位置设置为绝对。 现在，您可以使用“上/左/下/右”属性指定要放置图元的位置-请记住，默认情况下，图元的中心点将放置在左上-这意味着您需要将图元变换-50%（上/左）以使其居中-示例如下：

li.top-menu-nav {
    position: relative;
    width: 100%;
}

ul.sub-nav {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

请记住，如果您想将LI居中，您需要添加-

ul.sub-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
}

另外，请注意，子元素（在本例中为li）可以移动到的高度将取决于父元素的高度，如果您的

顶部菜单导航
a
height:100vh
将允许将菜单放置在页面中心

希望这有帮助，
沃利
如果我的解释正确，你可以这样做：


。标题下拉菜单{
位置：相对位置；
显示：内联块；
}
.副导航{
显示：无；
文本对齐：居中；
位置：绝对位置；
最小宽度：8rem；
盒影：0 1rem 3rem 0 rgba（0,0,0,0.2）；
填充：1雷姆1.5雷姆；
z指数：1；
}
.副导航{
左：5雷姆；
}
.顶部菜单导航：悬停.子导航{
显示：块；
}













希望您至少尝试自己编写代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请带着您的代码回来解释您尝试了什么。我做了很多尝试并进行了研究，但仍然得出相同的结论。我不愿意承认失败，但除了骄傲，我需要帮助，希望这篇文章也能帮助其他人。谢谢你的反馈
ul.sub-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
}