原生元素在chrome、edge、safari中忽略text-align，仅firefox部分支持但不可靠；可通过text-align+direction控制选中态显示框对齐，下拉项居中需用js模拟组件实现。
下拉框 <select></select> 无法用 text-align 居中文字？原因很直接
HTML 原生 <select></select> 元素在多数浏览器中**忽略 text-align**（尤其是 Chrome、Edge、Safari），即使你给它加了 style="text-align: center;"，选项文字依然左对齐。这不是 bug，而是规范行为：浏览器对 <select></select> 的内部渲染（特别是下拉弹出部分）不响应 CSS 文本对齐指令，只尊重其自身 UI 策略。
真正生效的对齐方式：用 text-align + direction 组合控制输入框区域
虽然下拉菜单项不可控，但「选中态显示框」（即未点击时看到的那行文字）可以有限对齐。关键在于：必须同时设置 text-align 和 direction，否则部分浏览器（如 Chrome）会强制重置对齐。
-
text-align: center;或right;控制水平位置 -
direction: ltr;（默认）或rtl;影响文本流与对齐锚点关系；设为rtl有时能“绕过”某些浏览器的对齐拦截 - 仅对
<select></select>本身生效，不影响<option></option>列表项
<select style="text-align: center; direction: ltr; width: 200px;"> <option value="1">选项一</option> <option value="2">选项二</option> </select>
想彻底统一所有文字对齐？只能放弃原生 <select></select>
如果你需要「下拉菜单展开后每项也居中/右对齐」，原生方案无解。必须用 JavaScript 模拟下拉（例如用 <div> + <code><ul></ul> + <li> 实现），再配合 CSS 控制：
- 用
display: none/block或visibility控制展开/收起 - 对模拟选项容器整体设
text-align: center; - 注意键盘导航（
Tab、方向键）、焦点管理、ARIA 属性（如aria-expanded、role="listbox"）必须手动补全 - 移动端需额外处理点击穿透、滚动冲突等问题
兼容性陷阱：Firefox 是个例外，但别依赖它
Firefox 目前是唯一对 <select></select> 内部 text-align 支持较完整的主流浏览器——它能让 <option></option> 文字随父级 <select></select> 的 text-align 对齐。但这属于非标准行为，W3C 未规定，且未来可能调整。一旦你基于 Firefox 表现写样式，其他浏览器必然错位。
立即学习“前端免费学习笔记（深入）”；
所以，不要把 text-align 当作跨浏览器下拉对齐方案；要么接受「仅输入框区域可调」，要么上自定义组件——后者才是稳定可控的路径。
