这个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一起工作。

padding-left: 45%;
font-size: 50px;

填充将文本居中，可以调整文本大小:)

从验证的角度来看，这显然不是100%正确的，但它确实起作用了:)

我遇到了这样一个问题，一个客户坚持这样做，他们用的是Mac和iPhone。

我最终使用了媒体查询和填充左侧的百分比填充。这是一个令人满意的解决方案吗?完全没有，但这让我开始了新的生活。

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

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

目前在Safari或Edge上不工作!

我也遇到过类似的问题。 我的解决方法是在样式部分更改为固定大小的字体:

option {
  font-family: Courier New;
  width: 12ch;
  font-size: 14pt
}

select {
  font-family: Courier New;
  width: 14ch;
  font-size: 14pt
}

在body中，我用下划线填充所显示的选项，使它们具有相同的长度。 注意使用下划线两边的中心显示:

<select onchange='O.src=this.options[this.selectedIndex].value' align="center">
  <option value="" align="center">___(none)___</option>
  <option value="https://www.247backgammon.org/" align="center">_Backgammon_</option>
  <option value="https://www.247klondike.com/klondikeSolitaire3card.php" align="center">__Klondike__</option>
  <option value="https://www.247minesweeper.com/" align="center">_Minesweeper</option>
  <option value="https://sudoku.com/" align="center">
    <p>___Soduku___</p>
  </option>
</select>

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

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

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