CSS 列表项垂直居中对齐

在本文中，我们将介绍如何使用CSS实现列表项垂直居中对齐的效果。列表项垂直居中对齐是在网页设计中常见的需求之一，特别是在导航菜单或者项目列表中，保持列表项垂直居中可以提升页面的美观度和可读性。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用 `line-height` 属性

在CSS中，我们可以使用 line-height 属性来控制行内元素的行高，从而实现垂直居中对齐。列表项的默认行高是根据字体大小决定的，我们可以通过设置 line-height 属性来改变行高的数值，使其与父容器高度相等，从而达到垂直居中的效果。

下面是一个示例代码：

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
}

.menu li {
  line-height: 200px;
}

在上面的示例中，我们给父容器 .menu 设置了 display: flex; 属性，这样可以使用弹性盒子模型来实现更灵活的布局。同时，我们还给 .menu 设置了 height: 200px; 属性来限制容器的高度，使列表项相对于父容器垂直居中。

然后，我们给每个列表项 .menu li 设置了 line-height: 200px; 属性，使其行高与父容器相等，从而实现了垂直居中对齐的效果。

使用 `display: table-cell`

除了使用 line-height 属性，我们还可以使用 display: table-cell 属性来实现列表项的垂直居中对齐。这种方法在实现上稍微复杂一些，但是兼容性更好。

下面是一个示例代码：

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

.menu {
  display: table;
  height: 200px;
  margin: 0;
  padding: 0;
}

.menu li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

在上面的示例中，我们给父容器 .menu 设置了 display: table; 属性，将容器变为一个表格布局。然后，我们给 .menu li 设置了 display: table-cell; 属性，使每个列表项都表现为一个单元格。同时，我们使用 vertical-align: middle; 属性来实现垂直居中对齐。

使用 `transform` 属性

除了上述两种方法，我们还可以使用 transform 属性来实现列表项的垂直居中对齐。这种方法需要注意浏览器的兼容性，需要添加浏览器厂商前缀。

下面是一个示例代码：

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
}

.menu li {
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

在上面的示例中，我们给父容器 .menu 设置了 display: flex; 属性，然后使用 justify-content: center; 属性来实现垂直居中的效果。

然后，我们给每个列表项 .menu li 设置了 transform: translateY(-50%); 属性，使其向上偏移50%，实现垂直居中对齐的效果。同时，为了兼容不同浏览器，我们还对 transform 属性添加了浏览器厂商前缀。