Html Can'；得不到'；对齐项目'；在flexbox中工作

我正在尝试使用flex box将“nav ul”对齐到分配给它的网格单元的中心，但“align items”属性似乎不起作用。我也尝试过使用“验证内容”，但这也不起作用。我错过了什么？提前谢谢

CSS/HTML

*{
框大小：边框框；
保证金：0；
填充：0；
颜色：白色；
}
a{
颜色：白色；
}
.siteContainer{
高度：100vh；
显示：网格；
网格模板列：15%自动；
网格模板行：25%6%60%自动；
网格模板区域：“imgTitle main”“nav main”“侧栏main”“侧栏页脚”
}
#imgTitle{
网格区域：imgTitle；
背景色：rgb（43,43,43）；
字体系列：“独立花”，草书；
文本对齐：居中；
}
#imgTitle img{
宽度：50%；
边界半径：50%；
}
导航{
网格区域：导航；
背景色：rgb（53,53,53）；
}
导航ul{
列表样式类型：无；
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
}
.siteContainer main{
网格区域：主；
背景色：rgb（73,73,73）；
}
.siteContainer组{
网格区域：侧栏；
背景色：rgb（63,63,63）；
}
.siteContainer页脚{
网格区域：页脚；
背景色：rgb（43,43,43）；
}

最后一个
艺术家|程序员






空白
主要
页脚

您可以使用

导航上的
flex
和
justify content:center
来对齐
center
。或
导航上的
显示网格

使用display:flex


*{
框大小：边框框；
保证金：0；
填充：0；
颜色：白色；
}
a{
颜色：白色；
}
.siteContainer{
高度：100vh；
显示：网格；
网格模板列：15%自动；
网格模板行：25%6%60%自动；
网格模板区域：“imgTitle main”“nav main”“侧栏main”“侧栏页脚”
}
#imgTitle{
网格区域：imgTitle；
背景色：rgb（43,43,43）；
字体系列：“独立花”，草书；
文本对齐：居中；
}
#imgTitle img{
宽度：50%；
边界半径：50%；
}
导航{
网格区域：导航；
背景色：rgb（53,53,53）；
显示器：flex；
证明内容：中心；
}
导航ul{
列表样式类型：无；
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
}
.siteContainer main{
网格区域：主；
背景色：rgb（73,73,73）；
}
.siteContainer组{
网格区域：侧栏；
背景色：rgb（63,63,63）；
}
.siteContainer页脚{
网格区域：页脚；
背景色：rgb（43,43,43）；
}

最后一个
艺术家|程序员






空白
主要
页脚
如果将flex属性应用于导航，并将justify content属性应用于css导航选择器；它应该可以工作，请参见以下内容：

nav {
  grid-area: nav;
  background-color: rgb(53, 53, 53);
  display: flex;
  justify-content: center;
}

不，我正试着按原样移动图标，稍微向下移动到中间。我试过了，它只是让图标靠得很近。@DavidSkx很高兴听到这个消息。快乐编码：）