[分享]css中如何让li垂直居中

CSS中有多种方法可以将li元素垂直居中，这里介绍两种比较常用的方法。第一种方法是使用flex布局。我们可以将ul元素设为flex容器，然后通过flex属性来控制li元素的垂直居中。具体代码如下： 项...

CSS中有多种方法可以将li元素垂直居中，这里介绍两种比较常用的方法。

第一种方法是使用flex布局。我们可以将ul元素设为flex容器，然后通过flex属性来控制li元素的垂直居中。具体代码如下：

<ul class="flex-container">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<style>
.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style> 

在上面的代码中，我们通过将flex-direction属性设置为column来让li元素在垂直方向上排列。然后通过justify-content和align-items属性将li元素在垂直和水平方向上居中。

第二种方法是设置li元素的line-height属性等于ul元素的height属性。具体代码如下：

<ul class="line-height-container">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<style>
.line-height-container {
  height: 100px;
}

.line-height-container li {
  line-height: 100px;
}
</style> 

在上面的代码中，我们通过设置ul元素的height属性使其具有一定的高度，然后通过设置li元素的line-height属性让它的文字垂直居中。

需要注意的是，以上两种方法在li元素内容高度和ul元素高度差距较大时可能会导致布局出现问题，所以需要视情况选择使用。