要使列表整体居中且内部文字与项目符号左对齐，需为ul设置明确width（如320px）并配合margin: 0 auto；li内多行文本垂直居中应使用display: flex + align-items: center，并确保li有min-height；ul子元素只能是li，禁止嵌套div。
列表整体居中但内部文字和项目符号保持左对齐，不能靠 text-align: center 直接套在 ul 上——那样会把项目符号也一起拉到中间，破坏语义和可访问性。
ul 整体居中：用 margin: 0 auto + width
让 ul 自身在页面中水平居中，关键不是“对齐内容”，而是“控制块级元素位置”。ul 默认是块级元素，但没有固定宽度，所以 margin: 0 auto 不生效。
- 必须给
ul设置明确的width（比如width: 320px或max-width: 80%） - 再加
margin: 0 auto，它才会真正居中 - 此时
li内容仍按默认左对齐，项目符号自然贴左，符合 HTML 规范
多行文本在 li 中垂直居中：别碰 vertical-align
vertical-align: middle 对 li 内多行文本完全无效——它只作用于行框（line box），而多行段落会生成多个行框，导致对齐不可控，尤其在 Firefox 和旧 Edge 中表现混乱。
- 正确做法是把每个
li设为display: flex - 加
align-items: center实现垂直居中 - 必须配合
min-height（如min-height: 48px），否则内容少时容器塌缩，居中失效 - 如果
li里有换行的p或span，flex 方案依然稳定生效
避免常见结构错误：ul > div 是非法 HTML
很多人为了“方便控制样式”把 div 直接塞进 ul，写成 <ul><div><li>...</li></div></ul> ——这违反 HTML5 规范，ul 的合法子元素只能是 li。
- 浏览器会自动纠错，可能把
div提到ul外，或拆成多个ul，导致样式错乱、无障碍阅读器识别失败 - 所有样式控制应直接作用于
ul或li，不要引入非法包裹 - 若需额外容器语义，可用
<li role="group">或 CSS 自定义属性替代
最易被忽略的是 li 的 min-height 和 ul 的显式 width——没这两个，flex 垂直居中和 margin 居中都会静默失效，看起来“什么都没做”，其实只是条件不满足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
