[分享]css两个li垂直居中显示

在CSS中，实现两个li元素垂直居中显示需要遵循以下步骤：

li {
  display: flex;
  align-items: center;
  justify-content: center;
} 

以上CSS代码使用flex布局，其中align-items属性用于指定垂直居中对齐方式，而justify-content则用于指定水平居中对齐方式。通过将这两种对齐方式都设置为center，即可实现li元素的垂直居中显示。

同时，为了保证这种布局在不同屏幕和设备上的兼容性，建议还可以添加以下代码：

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  width: 50%;
  text-align: center;
} 

在上述代码中，ul元素使用了flex布局，并添加了一些常见的重置样式，如padding和margin的值都设置为0，以及去除了li元素的默认样式，即list-style:none。

此外，还为li元素设置了一个宽度，这里设置为50%，即使在移动设备上也能达到很好的效果。由于设置了flex-wrap:wrap属性，因此当屏幕较小时，两个li元素会自动换行，并保持垂直居中显示的效果。