CODEWITHSUNDEEP
androidhtmlioscsswebview
NickF
NickF

Reputation: 5737

Align div to page center with dynamic size

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

Upvotes: 2

Views: 5208

Answers (4)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

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)

Upvotes: 5

Marc Audet
Marc Audet

Reputation: 46785

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/

Upvotes: 1

Tim Wasson
Tim Wasson

Reputation: 3656

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

Upvotes: 1

Alexander Sagen
Alexander Sagen

Reputation: 146

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

Upvotes: 1

Related Questions