这个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

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

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

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

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

有一个Chrome的部分解决方案:

select { width: 400px; text-align-last:center; }

它会将所选选项居中，但不会将下拉列表中的选项居中。

它还不是100%，但您可以使用这个片段!

text-align-last:中心;// Chrome浏览器 text-align:中心;// Firefox

目前在Safari或Edge上不工作!

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

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

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

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

这是对齐右。试一试:

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

浏览器对文本对齐-最后属性的支持可以在这里找到:https://www.w3schools.com/cssref/css3_pr_text-align-last.asp 看起来只有Safari还不支持它。