css li怎么水平居中对齐

要让CSS中的LI水平居中对齐，有几个方法可以实现。下面将逐个介绍这些方法。

方法一：使用flexbox布局

要使用flexbox将LI元素水平居中对齐，首先需要将LI元素的容器设置成Flexbox布局。这可以通过设置容器的“display”属性为“flex”来实现。

例如：

ul {
  display: flex;
  justify-content: center;
}

上述代码将UL元素设置为Flexbox布局，并将其子元素水平居中对齐。在此示例中，使用了“justify-content: center”属性来将LI居中对齐。你还可以通过其他属性来实现居中对齐，例如“align-items: center”、“align-content: center”等。

方法二：使用定位

通过将LI元素的容器设置成相对定位，可以使用绝对定位将LI元素居中对齐。首先，设置UL元素的“position”属性为“relative”。

例如：

ul {
  position: relative;
}

接着，将LI元素的“position”属性设置为“absolute”，并将“left”和“right”属性都设置为“0”（即设置元素的左右边缘都距离容器的左右边缘相等）。

例如：

ul li {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; /* 这一行代码可以让LI元素中的文本居中对齐 */
}

此时，LI元素已经水平居中对齐了。但是，有时需要为UL元素设置一个“height”属性，以便在垂直方向上将LI元素也居中对齐。

例如：

ul {
  position: relative;
  height: 50px; /* 这里假设UL元素的高度为50px */
}

ul li {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%); /* 这一行代码可以让LI元素在垂直方向上居中对齐 */
}

方法三：使用display:inline-block

CSS中的“display:inline-block”属性可以使元素像行内元素一样排列，而又像块级元素一样具有宽度和高度。可以使用这个属性来实现LI元素的水平居中对齐。

例如：

ul {
  text-align: center;
}

ul li {
  display: inline-block;
  text-align: center; /* 这一行可以让文本在LI元素中居中对齐 */
}

在这个示例中，UL元素的“text-align”属性被设置为“center”，可以让LI元素的父元素居中对齐。同时，设置LI元素的“display”属性为“inline-block”，并使文本居中对齐，可以将LI元素水平居中对齐。

方法四：使用table

可以使用CSS中的“display:table”和“display:table-cell”属性将LI元素水平居中对齐。首先，设置UL元素为表格元素，“display”属性为“table”：

例如：

ul {
  display: table;
  margin: 0 auto; /* 这一行代码可以让UL元素居中对齐 */
}

接着，设置LI元素的“display”属性为“table-cell”。

例如：

ul li {
  display: table-cell;
  text-align: center; /* 这一行代码可以让LI元素中的文本居中对齐 */
}

此时，LI元素已经水平居中对齐了。

结论

以上四种方法都可以实现CSS中的LI水平居中对齐。其中，使用Flexbox布局可能是最简单和最通用的方法。然而，如果需要兼容旧版的浏览器，使用定位或表格方法可能更可靠。