虽然你不能将选项文本居中，但你可以在选择的顶部放置一个绝对定位的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在文档中的位置是固定的。

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

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

虽然你不能将选项文本居中，但你可以在选择的顶部放置一个绝对定位的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

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还不支持它。

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

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

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

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