如何使用CSS实现li标签内span元素的水平与垂直完全居中

这是目前W3C推荐的最规范的居中方案，兼容性覆盖IE11及所有现代浏览器，完美适配你当前li设置了min-height、高度可自适应的场景，无论span内容是单行还是多行都能实现精准的水平+垂直居中。

核心修改点 #

你只需要给#aList li新增3行Flex相关属性即可：

#aList li {
    text-align: center;
    min-height: 50px;
    height: auto;
    border: 1px green solid;
    padding: 2px;
    margin: 10px;
    /* 新增以下三行 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

额外修正项 #

你原有代码里#aList的margin属性写法有误，多了逗号，正确写法为：

#aList {
    height: auto;
    list-style:none;
    /* 去掉逗号，用空格分隔参数 */
    margin: 5px 5px 5px 30px;
    font-size: 20px;
    border: 1px red solid;
    padding: 5px;
    width: 500px;
    display: inline-block;
    text-align:center;
}

如果你需要兼容IE10以下的老版本浏览器，可以使用table-cell方案，修改#aList li样式如下：

#aList li {
    min-height: 50px;
    height: auto;
    border: 1px green solid;
    padding: 2px;
    margin: 10px;
    display: table-cell;
    width: 466px; /* 对应原有ul宽度500px，减去li的左右margin20px、左右padding4px、左右边框2px，可根据需求调整 */
    vertical-align: middle;
    text-align: center;
}

注意：该方案仅建议在有低版本浏览器兼容需求时使用，Flex方案更灵活，无需固定宽度，适配性更强。

内容的提问来源于stack exchange，提问作者D.Man