Html 如何将已垂直对齐的菜单与宽度相等的列表项居中

我必须将菜单及其垂直对齐的列表项居中放置在标题“W”下方。菜单的宽度应该保持相等，设置为100px，但我在标题“W”下居中时最接近于保持该宽度的方法是将其连接到屏幕左侧。没有显示、边距或填充的组合有助于将菜单始终动态地放置在已经居中的标题“W”下方。我现在已经没有什么想法了，希望能得到一些帮助。如何做到这一点

这是我的密码：

*{
保证金：0；
填充：0；
}
正文{
背景：#e8e8e8；
}
h1{
填充：300px 0px 30px 0px；
文本对齐：居中；
字体系列：雷威；
字号：100；
字体大小：35px；
}
.菜单{
显示：内联块；
文本对齐：居中；
边界半径：2px；
宽度：100px；
}
li{
列表样式：无；
}
李亚华
显示：块；
填充：25px 25px 25px 25px；
字母间距：1px；
字体系列：雷威；
字体大小：300；
字体大小：30px；
颜色：#fff；
文字装饰：无；
文本转换：大写；
过渡：.25s；
}
.bg{
位置：固定；
z指数：-1；
排名：0；
右：0；
底部：0；
左：0；
过渡：.25s；
指针事件：无；
}
.menu li:第一个孩子{背景：#重要；}
.menu li:n个孩子（2）a{背景：#b9b9b9！重要；}
.menu li:n个孩子（3）a{背景：#a2a2a2！重要；}
.menu li:n个孩子（4）a{背景：#8b！重要；}
.menu li:第n个孩子（5）a{背景：#747474！重要；}
.menu li:第一个孩子：悬停~.bg{
背景：#d0；
}
.menu li:n子菜单（2）：悬停~.bg{
背景：#b9b9b9；
}
.menu li:n子菜单（3）：悬停~.bg{
背景#a2a2；
}
.menu li:n子菜单（4）：悬停~.bg{
背景：#8b；
}
.menu li:n子菜单（5）：悬停~.bg{
背景#7474；
}

W

尝试将正文添加到文本对齐：居中

*{
保证金：0；
填充：0；
}
正文{
背景：#e8e8e8；
文本对齐：居中；
}
h1{
填充：300px 0px 30px 0px；
文本对齐：居中；
字体系列：雷威；
字号：100；
字体大小：35px；
}
.菜单{
显示：内联块；
文本对齐：居中；
边界半径：2px；
宽度：100px；
}
li{
列表样式：无；
}
李亚华
显示：块；
填充：25px 25px 25px 25px；
字母间距：1px；
字体系列：雷威；
字体大小：300；
字体大小：30px；
颜色：#fff；
文字装饰：无；
文本转换：大写；
过渡：.25s；
}
.bg{
位置：固定；
z指数：-1；
排名：0；
右：0；
底部：0；
左：0；
过渡：.25s；
指针事件：无；
}
.menu li:第一个孩子{背景：#重要；}
.menu li:n个孩子（2）a{背景：#b9b9b9！重要；}
.menu li:n个孩子（3）a{背景：#a2a2a2！重要；}
.menu li:n个孩子（4）a{背景：#8b！重要；}
.menu li:第n个孩子（5）a{背景：#747474！重要；}
.menu li:第一个孩子：悬停~.bg{
背景：#d0；
}
.menu li:n子菜单（2）：悬停~.bg{
背景：#b9b9b9；
}
.menu li:n子菜单（3）：悬停~.bg{
背景#a2a2；
}
.menu li:n子菜单（4）：悬停~.bg{
背景：#8b；
}
.menu li:n子菜单（5）：悬停~.bg{
背景#7474；
}

W

带有

文本对齐：居中的父元素应该可以做到这一点


*{
保证金：0；
填充：0；
}
正文{
背景：#e8e8e8；
}
h1{
填充：300px 0px 30px 0px；
文本对齐：居中；
字体系列：雷威；
字号：100；
字体大小：35px；
}
.菜单{
显示：内联块；
文本对齐：居中；
边界半径：2px；
宽度：100px；
}
li{
列表样式：无；
}
李亚华
显示：块；
填充：25px 25px 25px 25px；
字母间距：1px；
字体系列：雷威；
字体大小：300；
字体大小：30px；
颜色：#fff；
文字装饰：无；
文本转换：大写；
过渡：.25s；
}
.bg{
位置：固定；
z指数：-1；
排名：0；
右：0；
底部：0；
左：0；
过渡：.25s；
指针事件：无；
}
.菜单包装{
文本对齐：居中；
}
W








将此添加到您的身体中

要了解有关FlexBox的更多信息，请观看一个有趣的游戏：

文本对齐：居中；？我是个傻瓜。我的注意力完全集中在
li
、
li a
和
菜单上。我没有想到只写在
文本对齐：居中到
正文
或
*
，这两种方法似乎都能起作用。谢谢
body {  
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}