Html 将子对象居中放置到其父对象的中心

在我的

中，我当然有一些

。这些列表项需要垂直居中，背景必须为全宽和全高

我尝试的方法是使用

align items:center在
上，我尝试了
对齐self:center在

以下是我目前的代码：


。桌面菜单左侧{
显示：网格；
网格模板列：自动；
身高：100%；
填充：0；
保证金：0；
}
.桌面菜单左李{
身高：100%；
}
.桌面菜单左李a{
身高：100%；
填充：0 10px；
}







你应该给你的
桌面菜单留下
高度
和
宽度
，以获得全宽和全高背景，例如
高度：100%

然后您还可以根据垂直对齐列表项。
我通过设置
display:grid；并对齐项目：居中在
li
上，因此我不必为任何元素设置高度。
我对您的代码进行了一些处理。

这就是你想要达到的结果吗


/*添加到此处*/
html，
身体{
身高：100%；
宽度：100%；
位置：相对位置；
}
/*添加颜色*/
深蓝色{
背景色：深蓝色；
}
.橙色{
背景颜色：橙色；
}
格林先生{
背景颜色：绿色；
}
.粉红{
背景颜色：粉红色；
}
达克朗格先生{
背景色：达克朗格；
}
浅蓝色{
背景颜色：浅蓝色；
}
.左侧的桌面菜单{
显示：网格；
网格模板列：自动；
身高：100%；
填充：0；
保证金：0；
}
.桌面菜单左李{
身高：100%；
列表样式类型：无；/*已添加*/
}
.桌面菜单左李a{
填充：0 10px；
/*增加*/
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}









在这种情况下，最好使用flexbox，因为在grid中，如果要在HTML中添加
，也必须更改CSS


html，
身体{
身高：100%；
}
身体{
保证金：0；
}
.左侧的桌面菜单{
身高：100%；
列表样式：无；
填充：0；
保证金：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.桌面菜单左>右{
弹性：1；
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.桌面菜单左>左：第n个子项（奇数）{
背景:#555；
}
.桌面菜单左a{
显示：块；
填充：0.5雷姆；
}







到中心在哪里？没有高度，你用你的手占据了所有的高度ul@TemaniAfif所以我必须给我的李一个100%的高度，然后把李放在中间？100%什么？你需要弄清楚如何居中？相对于什么？@TemaniAfif，所以我必须给我的ul一个静态高度？@TemaniAfif现在它居中了，但是背景颜色占据了文本的宽度，而不是全宽/高度这确实是我需要的！这确实是个好办法。我也只是想出来了。我只需将“显示：网格”和“对齐项目：居中”添加到liI，但我还不能进行任何投票。我的名声很低，但我愿意给你；）@莱纳普尼斯：）我经常将这个中心方法用作这样的类：
.center-y{position:absolute；top:50%；transform:translateY（-50%）；}
（提前感谢！）