下拉列表项（<option>）无法用CSS直接居中，因浏览器限制其样式；仅可通过设置<select>的text-align:center实现折叠态文本居中，或用自定义组件完全替代原生<select>以实现展开态真正居中。
下拉列表项（<option>）本身无法被 CSS 直接居中——浏览器对 <select> 内部的 <option> 渲染有严格限制，几乎所有主流浏览器（Chrome、Firefox、Safari、Edge）都不支持对其设置 text-align、padding、display 或伪类样式。所谓“让下拉项居中”，实际只能从两个层面入手：一是控制 <select> 本身的文本对齐（仅影响展开前的显示），二是用自定义组件完全替换原生 <select> 实现真正可控的居中效果。
为什么直接给 <option> 加 text-align: center 没用
这是最常踩的坑。开发者常写：
select option {
text-align: center; /* ❌ 完全无效 */
padding-left: 20px; /* ❌ 不生效 */
}原因很明确：<option> 是操作系统级控件（尤其在 macOS 和 Windows 上由系统渲染），CSS 规范明确禁止对其应用大多数样式。你看到的“居中”错觉，往往只是 <select> 元素自身设置了 text-align: center，但它只作用于折叠状态下的选中值，不影响下拉展开后的列表项对齐。
<select> 折叠态文本居中：仅限选中值显示
如果你只需要让下拉框当前显示的文本（即选中项）在框内水平居中，可以安全使用：
立即学习“前端免费学习笔记（深入）”；
-
<select>元素上设text-align: center（对折叠态有效） - 确保
<select>有足够宽度，避免文字被截断 - 不要依赖
<option>的样式，它不参与该渲染
示例：
<select style="text-align: center; width: 200px;"> <option value="a">Apple</option> <option value="b">Banana</option> </select>
注意：这个居中仅体现在未展开时；一旦点击展开，各选项仍按浏览器默认左对齐，且无法干预。
真·下拉项居中：必须用自定义组件替代原生 <select>
要让下拉菜单中的每一项都真正居中（包括展开后），唯一可靠路径是放弃原生 <select>，用 <div> + <ul> + JavaScript 重写。关键点：
- 用
<div class="custom-select">模拟选择框，内部含<span>显示当前值 - 下拉面板用
<ul class="dropdown-list">，每个<li>是可点击项 - 为
<li>设置text-align: center或display: flex; justify-content: center—— 完全可控 - 需手动处理焦点、键盘导航（
↑/↓）、回车确认、ESC 关闭等可访问性逻辑 - 避免用
position: absolute导致下拉被父容器overflow: hidden截断；推荐用position: fixed或动态计算top/left
简单示意结构：
<div class="custom-select">
<span class="selected-value">请选择</span>
<ul class="dropdown-list">
<li style="text-align: center;" data-value="1">选项一</li>
<li style="text-align: center;" data-value="2">选项二</li>
</ul>
</div>原生 <option> 居中是个伪需求——它的样式不可控是规范使然，不是技巧没到位。真要居中，就得接受重写的成本；如果只是想“看起来居中”，那只需管好 <select> 自身的 text-align 和尺寸即可。别在 option 上浪费调试时间。
