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 - DEMO

<强> 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%)
}

如何水平和垂直居中选择框

2 个答案:

JSFiddle - DEMO