在你的选择使用宽度:自动和无填充来查看你的文本有多长。 我在我的选择上使用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的头部。

简单的方法: 使用padding-left

select{
   padding-left:2rem
}

试试这个:

select {
    padding-left: 50% !important;
    width: 100%;
}

恐怕这在纯CSS中是不可能实现的，也不可能实现完全跨浏览器兼容。

然而，使用jQuery插件，你可以为下拉菜单设置样式:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

这个插件隐藏了select元素，并动态创建span元素等以显示自定义的下拉列表样式。我很有信心，你可以改变样式跨度等中心对齐的项目。

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

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

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

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

这个JS函数应该适合你

function getTextWidth(txt) {
  var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
  var elmWidth = $elm.width();
  $elm.remove();
  return elmWidth;
}
function centerSelect($elm) {
    var optionWidth = getTextWidth($elm.children(":selected").html())
    var emptySpace =   $elm.width()- optionWidth;
    $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start 
$('.centerSelect').each(function(){
  centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
  centerSelect($(this));
});

完整的代码来源:http://codepen.io/anon/pen/NxyovL