虽然你不能将选项文本居中，但你可以在选择的顶部放置一个绝对定位的div，以达到同样的效果:

#centered
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 818px;
  height: 37px;
  text-align: center;
  font: bold 24pt calibri;
  background-color: white;
  z-index: 100;
}

#selectToCenter
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 840px;
  height: 40px;
  font: bold 24pt calibri;
}

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

<select id="selectToCenter"></select>
<div id="centered"></div>

确保div和select在文档中的位置是固定的。

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

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

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

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

你必须把CSS规则放到选择类中。

使用CSS文本缩进

例子

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

CSS代码

select { text-indent: 5px; }

2020年，我使用:

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

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

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

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