子元素父容器居中及UL内LI垂直居中、背景铺满布局问题

嘿，针对你提到的两个布局问题，我来给你调整代码，让效果完全符合预期：

需求1：子元素居中于父容器 #

你的父容器.desktop-menu-left已经用了Grid布局，要让所有子元素（也就是<li>）在父容器里水平+垂直居中，直接在这个类里加上place-items: center;就可以了——这个属性是align-items和justify-items的简写，一步搞定双方向居中。

需求2：

列表项垂直居中，背景铺满宽高 #

你已经给<li>设置了height: 100%，但要让<li>内部的内容垂直居中，同时背景完全铺满列表项的宽高，需要给<li>也加上Flex布局：

• 用display: flex; align-items: center;让内部内容垂直居中
• 因为Grid布局下<li>的宽度会自动填充所在列的宽度，再配合height: 100%，背景就能自然铺满整个列表项的区域

修改后的完整代码 #

.desktop-menu-left {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  height: 100%;
  padding: 0;
  margin: 0;
  place-items: center; /* 新增：让所有<li>在父容器中居中 */
}

.desktop-menu-left li {
  height: 100%;
  width: 100%; /* 确保宽度填充列，可选，如果grid列是auto的话也会自动填充，但显式设置更稳妥 */
  display: flex; /* 新增：让<li>内部内容垂直居中 */
  align-items: center;
  justify-content: center; /* 可选，如果需要内部内容水平居中的话加上 */
  /* 这里可以加你的背景样式，比如 background: #f0f0f0; */
}

补充说明 #

你之前尝试的align-items: center;在父容器上是有效的，但align-self: center;在<li>上其实多余——因为父容器的align-items已经会让所有子元素垂直居中了。真正需要调整的是<li>内部的布局，让里面的文字/内容垂直居中，这才是Flex布局要做的事~

内容的提问来源于stack exchange，提问作者user9726039