居中 UL 中的 LI 元素的 CSS 实现方式

在很多 UI 设计和 Web 开发中，需要将 UL 中的 LI 元素水平和垂直地居中显示。以下是一些常用的 CSS 实现方法。

HTML 示例

在介绍如何居中 UL 中的 LI 元素之前，需要先提供一个基本的 HTML 示例代码：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

水平居中

方法一：使用 text-align 属性

如果 UL 元素具有固定宽度，在其父元素中使用 text-align 属性可以将整个 UL 元素水平居中，例如：

ul {
  text-align: center;
}

但是这种方法只能将 UL 元素居中，并不能将 LI 元素居中。

方法二：使用 display 属性和 margin 属性

将 UL 元素的 display 属性设置为 “inline-block” 并使用 margin 属性可以将整个 UL 元素和其中的 LI 元素居中，例如：

ul {
  display: inline-block;
  margin: 0 auto;
}

这个方法利用了 margin 的自动计算功能，将其设置为 “0 auto” 就可以将元素居中。

垂直居中

方法一：使用 line-height 属性

将 UL 元素的 line-height 属性值设置为其高度即可将其中的 LI 元素垂直居中，例如：

ul {
  height: 200px;
  line-height: 200px;
}

这个方法适用于 LI 元素具有固定高度的情况。

方法二：使用 display 属性、table-cell 属性和 vertical-align 属性

将 UL 元素的 display 属性设置为 “table”，将其中的 LI 元素的 display 属性设置为 “table-cell”，并使用 vertical-align 属性可以将 LI 元素垂直居中，例如：

ul {
  display: table;
  height: 200px;
}
li {
  display: table-cell;
  vertical-align: middle;
}

这个方法可以适用于 LI 元素具有不同高度的情况。

水平和垂直居中

将上述方法相结合即可将 UL 中的 LI 元素同时水平和垂直居中，例如：

ul {
  display: table;
  margin: 0 auto;
  height: 200px;
  line-height: 200px;
}
li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

这个方法可以适用于 LI 元素具有不同高度和宽度的情况。

以上介绍了一些常用的 CSS 实现 UL 中的 LI 元素的居中方法，其中有些方法可以相互结合使用，使居中效果更佳。