Align div to page center with dynamic size

Question

I saw many example of how to centerize div to middle of page, but in all the examples the size of the divs was fixed.
How to put div in center of page with unknown size of div height?
(the gray div in the middle)

My code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style>
            html,body{
                margin: 0;
                padding: 0;
                border: 0;
            }
            body{
                background-color: transparent; 
                overflow: hidden;
                font-family: "Helvetica"
                    ;
                    color: #359115;
                    font-weight:bold;
                    }

                    #wrapper {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                    }

                    #container {
                        background-color: #dddddd;
                        /*height: 100%;
                        widows: 100%;*/
                        margin: 0,auto;
                        text-align: center;
                    }



        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="container" align="center">
                <span class="currency">$ </span><span class="integer">4,080,048.</span><span class="decimal">00</span>
            </div>
        </div>
    </body>
</html>

EDIT:

I need that to work for a webView in Android and IOS, from some reason the numbers are always appear at the top of the browser.
NOTE: The browser are not full screen!

The screenshot is in my other question

There's a syntax error in your CSS: `margin: 0,auto;` should be `margin: 0 auto;` — André Dion, Jul 31 '13 at 14:32
In your sample code the `#container` is full width, which technically is "centred". What are you trying to achieve? — André Dion, Jul 31 '13 at 14:34
Do you want the `#container` to fill up the screen and have the content centered vertically and horizontally? — Marc Audet, Jul 31 '13 at 14:35
I assume he wants to center the content vertically because he mentioned unknown height — Huangism, Jul 31 '13 at 14:35
In that case, it's already centred vertically as well since the `body`'s height is `auto`. — André Dion, Jul 31 '13 at 14:37
possible duplicate of [Center a DIV horizontally and vertically](http://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically) — André Dion, Jul 31 '13 at 14:38
It's not a duplication, because all the example has fixed sizes — NickF, Jul 31 '13 at 14:48
if you don't care about `IE8` support take a look at my answer — Fabrizio Calderan, Jul 31 '13 at 15:25
I thought it's a simple HTML problem, but seems that mobile devices needs more corrections, please see the edit. — NickF, Jul 31 '13 at 19:14

Fabrizio Calderan · Accepted Answer · 2013-07-31T15:30:28.227

How to put div in center of page with unknown size of div height?

A simple solution involving 2d transforms (with negative translate values for X and Y axis):

http://jsbin.com/itifad/1/edit

CSS

div {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);    /* Older Gecko browser */
  -ms-transform: translate(-50%, -50%);     /* IE9+ */
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

and this is all: no need to use javascript or nested elements, to define the height of parent containers or use tricky display properties.

Further reference: http://css-tricks.com/centering-percentage-widthheight-elements/

Browser support: http://caniuse.com/transforms2d (not working on IE<=8)

Alexander Sagen · Answer 2 · 2013-07-31T14:48:41.810

This should work:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style>
            body{
                margin: 0; /* There is no margin, padding or border on html, only margin: 8px; on body... */
                background-color: #FFFFFF; /* Why transparent? Changed to white... */ 
                font-family: "Helvetica";
                color: #359115;
                font-weight: bold;
            }
            #wrapper {
                position: relative;
                width: 50%;
                margin: auto;
                text-align: center;
            }
            #container {
                background-color: #dddddd;
                margin: 0 auto;
                text-align: center;
            }



        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="container" align="center">
                <span class="currency">$ </span><span class="integer">4,080,048.</span><span class="decimal">00</span>
            </div>
        </div>
    </body>
</html>

And if you want it to be in the absolute center, x and y, you need to change this in the style:

        #wrapper {
            position: relative;
            width: 50%;
            margin: auto;
            text-align: center;
        }
        #container {
            background-color: #dddddd;
            margin: 0 auto;
            text-align: center;
        }

To this:

        #wrapper {
            position: relative;
            width: 50%;
            height: 50%;
            margin: auto;
            text-align: center;
        }
        #container {
            background-color: #dddddd;
            margin: auto;
            text-align: center;
        }

Marc Audet · Answer 3 · 2013-07-31T14:55:16.907

I would do it this way. For the HTML, add a .wrapper container around your content:

<div id="container"> 
    <div class="wrapper">
    <span class="currency">₪</span><span class="integer">4,080.</span><span class="decimal">00</span>
    </div>
</div>

Assuming you want to center this is a page (viewport), I would use the following CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
}
body {
    background-color: transparent;
    overflow: hidden;
    font-family:"Helvetica";
    color: #359115;
    font-weight:bold;
}
#container {
    display: table;
    height: 100%;
    width: 100%;
    background-color: #dddddd;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#container .wrapper {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

How This Works

Set the display type to table for the #container and use absolute positioning to make it stretch to the edges of the viewport.

Set the .wrapper to display type table-cell, set the height to 100%, and then use vertical-align: middle to get vertical centering, and text-align: center for horizontal centering.

Demo fiddle: http://jsfiddle.net/audetwebdesign/mBDcg/

score 1 · Answer 4 · answered Jul 31 '13 at 14:52

display:table is the easiest way to accomplish this. See here: http://jsfiddle.net/bRgrf/4/

html,body{
                margin: 0;
                padding: 0;
                border: 0;
    height:100%;
    width:100%;
            }
            body{
                background-color: transparent; 
                overflow: hidden;
                font-family: "Helvetica";
                    color: #359115;
                    font-weight:bold;
    display:table;
                    }


                    #container {
                        background-color: #dddddd;
                        height: 100%;
                        width: 100%;
                        margin: 0;
                        text-align: center;
                        vertical-align:middle;
    display:table-cell;
                    }

Align div to page center with dynamic size

EDIT:

4 Answers4