如何让select文字居中

做手机端遇到一个问题，如何把select的文字居中，自带的select控件真是很恶心，总结一下目前网上的几种办法：

赶时间的小伙伴可以直接拖到最下面

方法一：

select:{
width: auto;
padding: 0 2%;
margin: 0;
}
option{
text-align:center;
}

1.必须设置select的padding，留意：padding: 0 2%; 前面的0表示上下，后面的值表示左右，这个值设置为1%都可以，但是不能是0,值越大，select就越长。
2.不要设置select的宽（width），auto就可以了。
这种方法就是给左右padding，使文字居中，可是这个值不好控制

方法二：

select{
width:auto;
height:24px;
line-height:24px;
text-align:center;
text-align-last: center;
}

这个在安卓上面可以居中，ios上面没有效果，用伪类解决也无效

方法三：

这个方法是我自己琢磨出来的，在外面套一个盒子label，id指向这个select

label{
width:100%;
text-align:center;
}

这个实现了居中显示，可是点击label，IOS上面可以弹出控件，安卓不会弹出select控件

方法四：使用JS模拟

最终我是用这个方法解决的，直接上代码

HTML代码：

<div class="select-div">
  <span id="select-show">-请选择-</span>
  <select id="sex" name="" class="txt">
    <option value="">-请选择-</option>
    <option value="男">男</option>
    <option value="女">女</option>
  </select>
</div>

CSS：

.select-div {
  width: 100%;
  text-align: center;
  border: 1px solid #eee;
  position: relative;
}
select.txt {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}

JS：

$('#sex').change(function () {
    var index = $('#sex option:selected').index(); //序号，取当前选中选项的序号
    $('#select-show').html($('#sex option:selected').html());
  })

就可以简单模拟实现select居中的效果了,如果有更好的办法，希望大佬来补充