How to center horizontally and vertically a select box

Question

I'm trying to center horizontally and vertically a select box

Here is 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

There are several methods: http://www.vanseodesign.com/css/vertical-centering/ — Darek Kay, Sep 14 '14 at 11:50
This question has been asked many times. See http://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically — i alarmed alien, Sep 14 '14 at 11:52

Anonymous · Accepted Answer · 2014-09-14T12:14:44.677

2

You could do it like this to center horizontally and vertically the select box.

JSFiddle - DEMO

CSS:

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

edited Sep 14 '14 at 12:14

answered Sep 14 '14 at 12:03

Anonymous

10,002
3
23
39

Unfortunately I didn't get how I can style it horizontally without adding a `height` for `div.wrapper` – ummahusla Sep 14 '14 at 15:50
@Tibbers If you remove the height then it will look like this demo - http://jsfiddle.net/j3r9Lp81/3/ but it'll be center vertically if there is some height to your `div.wrapper` and please let me know if you want to know or do something else. :) – Anonymous Sep 14 '14 at 15:55
@Tibbers "Unfortunately I didn't get how I can style it horizontally without adding a height for div.wrapper" - What do you mean? I really don't understand how you want to style it horizontally without adding a height and could you please show me an image or screenshot or working demo that show me what exactly you want to achieve? – Anonymous Sep 14 '14 at 16:00
Let's take an example that I want have single page website with only 1 select box and I have a full width image as a background. My idea was without specifying height and weight center the select box. – ummahusla Sep 15 '14 at 08:51
@Tibbers JSFiddle demo - http://jsfiddle.net/j3r9Lp81/7/ and http://jsfiddle.net/j3r9Lp81/6/ – Anonymous Sep 15 '14 at 09:42

score 0 · Answer 2 · answered Sep 14 '14 at 12:21

0

You can do it setting an height for the wrapper element and setting it to position: relative then you can use position: absolute for centering the child element.

CSS

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

answered Sep 14 '14 at 12:21

emattiazzi

366
1
3
12

3

I like this method but you have to say that won't work in old browsers – Tomas Ramirez Sarduy Sep 14 '14 at 12:24
it should work in IE9+, FF3.5+ chrome4+, Opera10.5+, Safari3.1+ :: According to > http://caniuse.com/#feat=transforms2d – webkit Sep 14 '14 at 13:01

How to center horizontally and vertically a select box

2 Answers2

JSFiddle - DEMO

Linked