下拉菜单文字无法真正居中，因<select>是替换元素，CSS对<option>文本对齐无效；唯一可靠方案是改用自定义下拉组件，完全控制样式与可访问性。
下拉菜单（<select>）里的文字默认左对齐，且无法直接用 text-align 居中 —— 这是浏览器原生控件的限制，不是你写错了样式。
为什么 text-align: center 在 <select> 里无效？
因为 <select> 是替换元素（replaced element），其内部选项（<option>）的渲染由操作系统或浏览器 UI 引擎控制，CSS 对它的文本对齐几乎无权干预。你在 <select> 或 <option> 上加 text-align: center，绝大多数浏览器（Chrome、Firefox、Safari）都会忽略。
-
<option>不支持伪类、不响应padding、display、flex等布局属性 - 部分旧版 IE 曾允许
text-align，但现代标准已弃用该行为 - 即使加了
dir="rtl"或 Unicode 零宽字符强行“视觉居中”，也属于 hack，不可靠且破坏可访问性
真正可行的替代方案：用自定义下拉组件
如果你必须让下拉项文字居中，唯一稳定的方式是放弃原生 <select>，改用基于 <div> + <button> + <ul> 的自定义下拉。此时你完全掌控 DOM 结构和样式：
- 外层容器设
display: flex+justify-content: center控制按钮文字居中 - 下拉列表项（
<li>）用text-align: center或display: flex+justify-content: center居中内容 - 确保所有交互状态（hover/active/focus）都通过 CSS 显式定义，避免依赖原生行为
- 必须手动实现键盘导航（
↑/↓/Enter）、ARIA 属性（aria-expanded、aria-haspopup、role="listbox"）以保可访问性
如果只能用原生 <select>，怎么“看起来”居中？
在极少数兼容性要求苛刻、又不允许重写组件的场景下，可尝试以下折中做法（效果有限，仅作视觉微调）：
立即学习“前端免费学习笔记（深入）”；
- 给
<select>加padding-left和padding-right，使文字在可用空间内“视觉偏移”，例如padding: 0 20px - 配合
direction: rtl强制文本右对齐，再用text-align: left反向“骗”出居中感（仅对纯英文有效，中文会乱序） - 使用字体宽度一致的等宽字体（如
font-family: monospace），配合固定width和text-indent手动估算居中位置 —— 但不同字号/缩放下极易失效
这些都不是真正的居中，只是权宜之计。一旦用户缩放页面、切换系统字体或使用屏幕阅读器，效果就会崩塌。
真正需要文字居中的下拉菜单，从来就不是“怎么给 <option> 加样式”的问题，而是“要不要换掉原生控件”的决策点。别在原生 <select> 上死磕居中 —— 它的设计初衷就是统一、克制、可访问，而不是灵活定制。
