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

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

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>

试试这个:

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

简单的方法: 使用padding-left

select{
   padding-left:2rem
}

这是对齐右。试一试:

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

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

2020年，我使用:

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}