スマホでselectのテキストは左右中央にできるのか

ぐぐったらtext-align: -webkit-center;で左右中央にできるというのでやってみたけれど、iOS7・iOS8で効かなかった・・・

参考：http://www.yoheim.net/blog.php?q=20121007

#bugfix

試行錯誤したら動いた。
※iPhoneと同じCSSだとAndroidで動かない（labelクリックしてもselectが開かない？）。

<label>
    <select>
        <option>選択１だよ〜</option>
        <option>選択２だよ〜</option>
        <option>選択３だよ〜</option>
    </select>
</label>

select { //Android
    text-align: center;
}

@media screen and (max-device-width: 480px) { //iPhone
    label {
        display: -webkit-box;
        display: box;
        box-pack:center;
        -webkit-box-pack:center;
        background-color: #fff;
        border: 1px solid #CCC;
        border-radius: 6px;
        cursor: pointer;
    }
    
    select {
        border: none;
    }
}

デモ：http://jsdo.it/Ituki/tsIQ