如何实现select下拉列表内option选项内容居中显示？

实现select选项内容居中的方案 #

原生<select>标签的<option>属于浏览器系统控制渲染的替换元素，你目前写的float、inline-flex这类布局属性对它不会生效。如果要实现选项文字居中，可以用以下两种方案：

方案一：CSS原生适配（兼容大部分主流浏览器）

修改你的CSS代码如下即可：

.form-select {
    display: inline-block;
    overflow-y: unset;
    text-align: center;
}
.form-select option {
    text-align: center;
}
/* 针对Chrome、Edge、Safari等webkit内核浏览器额外适配 */
.form-select::-webkit-select-menu {
    text-align: center;
}

这个方案在90%以上的主流浏览器都能生效，少数老旧浏览器或者火狐特殊版本可能存在兼容问题。

方案二：全浏览器兼容方案

如果要求所有浏览器都100%实现居中效果，原生select无法满足需求，建议改用div、ul等普通元素自定义模拟多选框的交互和样式，自定义控件的样式不受浏览器原生渲染限制，可以完全按照需求调整。

内容的提问来源于stack exchange，提问作者money_kwarta