Html CSS菜单-居中对齐项目和居中垂直对齐

我有一个带有子菜单的CSS菜单，我试图让它在菜单的中心显示菜单项

我尝试将

text align:center

添加到

#菜单产品类别>li{

，但没有成功

我还添加了代码>空白顶部：10px；到<代码>菜单产品类别> Li 将菜单项的文本放在菜单的中间（垂直）上，但是当悬停在项目上时，悬停背景不显示全高度。

我在我的菜单中创建了一把小提琴：

试试这个：

。菜单产品类别容器{
显示：块；
浮动：左；
宽度：100%；
高度：60px；
背景：#F36F25；
}
#菜单产品类别，ul.子菜单{
列表样式：无；
填充：0；
保证金：0；
/**这里------------------**/
文本对齐：居中；
身高：100%；
}
#菜单产品类别>li{
/*显示：内联块；
右边距：0px；
位置：相对位置；
填充：8px；
文字装饰：无；
边缘顶部：10px*/
/**这里------------------**/
显示：内联块；
位置：相对位置；
填充：21px 8px；
文字装饰：无；
}
#菜单产品类别li>a{
颜色：#FFFFFF；
}
#菜单产品类别>li:悬停{
背景：#FFFFFF；
颜色：#F36F25；
}
#菜单产品类别>li>a:悬停{
颜色：继承；
}
#菜单产品类别ul.子菜单{
显示：无；
宽度：200px；
位置：绝对位置；
z指数：1；
左：0；
顶部：40px；
}
#菜单产品类别li：悬停ul.子菜单{
显示：块；
最大高度：200px；
背景：#F36F25；
}
#菜单产品类别ul.子菜单li{
颜色：#FFFFFF；
浮动：无；
填充物：5px；
}
#菜单产品类别ul.子菜单li:悬停{
颜色：#F36F25；
背景：#000000；
浮动：无；
填充物：5px；
}