如何对选中框进行水平和垂直居中

Question

我正试图在水平和垂直方向上居中一个选择框

这是jsfiddle - http://jsfiddle.net/j3r9Lp81/

CSS：

div.currency {
    text-align:center;
}

HTML：

<div class="wrapper">
        <div class="currency">
            <select id="currencies">
                <option value="GBP">Great Britain Pound</option>
                <option value="EUR">Euro</option>
                <option value="USD">US Dollar</option>
                <option value="AUD">Australian Dollar</option>
                <option value="CAD">Canadian Dollar</option>
                <option value="JPY">Japanese Yen</option>
                <option value="CHF">Swiss Franc</option>
                <option value="SEK">Swedish Krona</option>
                <option value="NZD">New Zealand Dollar</option>
                <option value="NZD">Hong Kong Dollar</option>
            </select>
        </div>
    </div>

提前谢谢你

Answer 1

您可以这样做，以居中水平和垂直的选择框。

JSFiddle - 演示

CSS:

div.wrapper {
    background: #F00;
    width: 100%;
    height: 300px;
    display: table;
}
div.currency {
    text-align:center;
    display: table-cell;
    vertical-align: middle;
}

Answer 2

您可以这样做，为包装器元素设置高度，并将其设置为position: relative，然后可以使用position: absolute对子元素进行居中。

CSS

div.wrapper{
    position:relative;
    background:red;
    height:100px;
}
div.currency {
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%)
}