android - Align div to page center with dynamic size -
i saw many example of how centerize div middle of page, in examples size of divs fixed.
how put div in center of page unknown size of div height?
(the gray div in middle)
<!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 work webview in android , ios, reason numbers appear @ top of browser.
note: browser not full screen!
the screenshot in other question
how put div in center of page unknown size of div height?
a simple solution involving 2d transforms (with negative translate values x , 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 all: no need use javascript or nested elements, define 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)
Comments
Post a Comment