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

使用CSS文本缩进

例子

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

CSS代码

select { text-indent: 5px; }

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

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

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

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

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

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

试试这个:

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

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

如果选项是静态的，则可以监听选择框上的更改事件，并为每个单独的项添加填充

$('#id').change(function() {
    var select = $('#id');
    var val = $(this).val();

    switch(val) {
        case 'ValOne':
            select.css('padding-left', '30px');
            break;
        case 'ValTwoLonger':
            select.css('padding-left', '20px');
             break;
        default:
            return;
    }
});