HTML select不会在chrome上居中显示文本

我遇到了一个问题，选择选项文本没有集中在chrome上。在firefox上使用文本对齐：居中选择工作，但它不适用于chrome。我没有在safari上测试过。我曾尝试在选择选项上使用文本对齐中心，但这也没有提供任何修复

.grid1{
网格面积：1/1/2/2；
}
.侧栏{
显示器：flex；
证明内容：中心；
背景色：#fafafa；
高度：100vh；
右边框：实心#eeeeee1px；
颜色：#333；
}
.侧杆h3{
填充：1rem0rem；
}
.选择{
高度：自动；
宽度：80%；
保证金：1rem；
溢出：隐藏；
}
挑选{
颜色：#333；
字体系列：“Poppins”，无衬线；
光标：指针；
宽度：10雷姆；
文本对齐：居中；
}
选择选项{
文本对齐：居中；
}

滤器
全部的
完整的
未完成
保存的列表
选择一个列表
删除列表

使用“文本最后对齐”可以修复此问题

.grid1 {
  grid-area: 1 / 1 / 2 / 2;
}

.side-bar {
  display: flex;
  justify-content: center;
  background-color: #fafafa;
  height: 100vh;
  border-right: solid #eeeeee 1px;
  color: #333;
}

.side-bar h3 {
  padding: 1rem 0rem;
}

.select {
  height: auto;
  width: 80%;
  margin: 1rem;
  overflow: hidden;
}
select {
  color: #333;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  width: 10rem;
  text-align: center;
  text-align-last: center;
}

select option {
  text-align: center;
}

---

最新的chrome版本已经产生了很多类似的问题。许多属性在chrome上不起作用，而在其他浏览器上起作用。也许，这也是同样的情况。我想我们需要等待他们来解决这些问题。希望有一个解决方案/黑客，如果没有的话，我会等它出来，看看它是否解决了！非常感谢。