CSS 實現

內文本垂直水平居中的標準方案

原始代碼缺陷

li {
    border:1px dotted #ccc;
    width:200px; height:30px;
    text-align:center;
    padding-bottom:auto; /* 無效 */
}

text-align:center 僅解決水平居中，垂直居中缺失。

三種標準方案

推薦寫法（兼容性最佳）

li {
    border:1px dotted #ccc;
    width:200px; height:30px;
    text-align:center;
    line-height:30px;  /* 單行文本首選 */
}

/* 多行文本兜底 */
li.multi {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center; /* 最後一行水平居中 */
}

避坑提示

• vertical-align:middle 僅對 inline/inline-block/table-cell 生效，對 block 元素 <li> 無效。
• padding-bottom:auto 不被任何瀏覽器支持，切勿使用。
• 若 <li> 內包含 <span> 等內聯元素，需對內聯元素設置 vertical-align:middle 配合 line-height。