如何水平垂直居中一个下拉框？

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>

Thank you in advance

- ummahusla

---

相对于什么居中？ - kmoe

有几种方法：http://www.vanseodesign.com/css/vertical-centering/ - Darek Kay

这个问题已经被问了很多次。请参考https://dev59.com/4GYq5IYBdhLWcg3w4EZx - i alarmed alien

@kmoe：我认为是相对于#wrapper ;) - Tomas Ramirez Sarduy

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;
}

- Anonymous

---

很遗憾，我不知道如何在不为“div.wrapper”添加“height”的情况下水平地设置样式。 - ummahusla

@Tibbers 如果您删除高度，则会看起来像这个演示 - http://jsfiddle.net/j3r9Lp81/3/ 但如果您的 div.wrapper 有一些高度，则会在垂直中心对齐，请告诉我您是否想知道或做其他事情。 :) - Anonymous

@Tibbers "很遗憾，我不知道如何在不为div.wrapper添加高度的情况下将其水平排列" - 你是什么意思？我真的不明白你想如何在不添加高度的情况下进行水平排列，能否请你展示一张图片或截图或演示，以便让我了解你想要实现的具体效果？ - Anonymous

让我们举个例子，我想要一个只有一个选择框的单页面网站，并且我有一张全宽度的图像作为背景。我的想法是在不指定高度和宽度的情况下将选择框居中。 - ummahusla

@Tibbers JSFiddle演示 - http://jsfiddle.net/j3r9Lp81/7/ 和 http://jsfiddle.net/j3r9Lp81/6/ - Anonymous

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

- emattiazzi

---

我喜欢这种方法，但你需要说明在旧版浏览器中无法使用。 - Tomas Ramirez Sarduy

它应该在IE9+，FF3.5+，chrome4+，Opera10.5+，Safari3.1+中工作:: 根据> http://caniuse.com/#feat=transforms2d - webkit