ul整体水平居中需先设width（如fit-content），再用margin-inline:auto或margin:0 auto；注意清空默认padding/margin，避免父容器flex/grid干扰，且li内文本需显式设text-align:left。
ul 本身怎么水平居中（不是内容，是整个列表）
想让 <ul></ul> 在页面中“整体居中”，关键不是给 <li> 或 <a></a> 加 text-align: center，而是控制 <ul></ul> 这个块级容器自身的定位。它默认宽度撑满父容器，margin: 0 auto 就会失效。
必须先让它“收窄”：用 width: fit-content（推荐）、width: 300px 或 width: 60%；再加 margin-inline: auto（现代写法）或 margin: 0 auto（兼容旧版 Safari/IE）。
-
list-style-position: inside可防止项目符号被padding截断 - 别用
text-align: center作用于<ul></ul>—— 它只影响内部行内内容，不移动<ul></ul>自身 - 如果父容器是
display: flex或display: grid，margin: 0 auto会被忽略，此时改用justify-content: center
链接文字左对齐但列表整体居中（常见误操作）
很多人加了 text-align: center 到 <ul></ul> 或 <li>，结果所有链接文字也居中了，违背“项目符号+文本左对齐”的原始需求。
正确做法是：让 <ul></ul> 居中（靠宽度 + margin），再单独确保 <li> 和 <a></a> 的文本左对齐：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
ul li { text-align: left; }（显式声明，避免继承干扰） -
ul li a { display: block; }（让链接占满整行，方便点击，也避免 inline 元素受空白符影响） -
ul li a { color: inherit; text-decoration: none; }（保持样式统一，移除下划线）
多行链接垂直居中或等高排列（Flex 布局实操）
当链接数量多、需要换行，又希望每行高度一致或整体在容器中垂直居中时，display: flex 是最可控的方案。但直接套在 <ul></ul> 上容易踩坑：
-
<ul></ul>默认有padding-inline-start: 40px（浏览器 UA 样式），必须重置：ul { padding: 0; margin: 0; } - 若用
flex-direction: column垂直堆叠，align-items: center能让每个<li>水平居中，但文字仍需text-align: left保证左侧对齐 - 若用
flex-wrap: wrap实现多行网格布局，建议给<li>设flex-basis: 30%而非width: 30%，更抗四舍五入误差
为什么加了 margin: 0 auto 还不居中？排查清单
这是最常卡住人的点。不是代码写错，而是隐性条件没满足：
-
<ul></ul>没设width（或max-width），且值不是100%——fit-content是最安全的选择 - 父容器用了
display: flex或display: grid，覆盖了margin: auto行为 - HTML 结构非法，比如
<ul><div>...</div></ul>——<ul></ul>只能直接包含<li>，否则渲染不可控 - 浏览器默认
ul的margin-block和padding-inline-start干扰了视觉基准，清空它们比调transform更干净
真正麻烦的从来不是“怎么写”，而是“为什么写了没反应”——多数时候，是默认样式和盒模型在背后悄悄作祟。
