不完全是居中，但是使用上面的例子，你可以在选择框中设置左边边距。

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

不完全是居中，但是使用上面的例子，你可以在选择框中设置左边边距。

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

在你的选择使用宽度:自动和无填充来查看你的文本有多长。 我在我的选择上使用100%的可用宽度，所有的选项都有相同的长度，这允许我使用非常简单的css。

text-indent将从左边移动文本，类似于左填充 120px是我的文本长度-我想把它居中，所以取一半的大小和一半的选择大小，留下50% - 60px

select{
  width: 100%;
  text-indent: calc(50% - 60px);
}

如果我有不同大小的选项呢?

然而，解决方案可能并不完美。 如果选项之间的差异不像5个字符，那么前一种解决方案可能会让你非常接近居中。

如果你仍然需要更精确的居中，你可以这样做

准备这门课:

.realWidth{
   width: auto;
}

应用onChange监听器选择元素 在该监听器中，将.realWidth应用到select元素with

const selectRef = document.getElementById("yourId");
selectRef.classList.add("realWidth");

获取期权的实际宽度。

const widthOfSelect = selectRef.getBoundingClientRect().width / 2;

widthOfSelect是你要找的宽度。存储在全局/组件变量中。 删除realWidth，你不再需要它了。

selectRef.classList.remove("realWidth");

我正在使用react，我不确定这将在香草工作，如果不是你必须找到另一个解决方案。

<select style={`textIndent: calc(50% - ${widthOfSelect}) %`}> ... </select>

另一个解决方案，然而，这是一个坏的一个可以创建CSS类与js和把它放在头部。

优点:

可能有用，我还没试过动态解决方案，但应该有用。

缺点:

如果程序不够快，用户将看到width: auto发生，因此想知道发生了什么。如果是这种情况，只需创建重复的select，将它隐藏在具有更高z-index的东西后面，并将on select侦听器应用于原始的隐藏副本。 可能很难使用，如果你不能内联的风格，因为香草的限制，但你可以做一个脚本来优化appendChild的头部。

你不能自定义<select>或<option>太多。唯一的方法(跨浏览器)将是手动创建一个下拉与div和css/js创建类似的东西。

这招对我很管用:

text-align: center;
text-align-last: center;

如果你有一个文本长度相似的选项列表(例如页面选择)，那么另一个“假”解决方案是:

padding-left: calc(50% - 1em);

这适用于Chrome、Firefox和Edge。这里的技巧是推送文本 从左边到中间，然后减去px, em或任何选项文本长度的一半。

最佳解决方案IMO(在2017年)仍然是通过JS替换选择，用div或其他东西构建自己的假选择框，并绑定单击事件，以获得跨浏览器支持。