将div与动态大小的页面中心对齐

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)

我看到了很多关于如何将div居中到页面中间的示例,但在所有示例中,div的大小都是固定的。如何将div放在div高度未知大小的页面中心? (中间的灰色div)

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!

我需要在Android和IOS中使用webView,因为这些数字总是出现在浏览器的顶部。注意:浏览器不是全屏!

The screenshot is in my other question

截图是我的另一个问题

4 个解决方案

#1

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

如何将div放在div高度未知大小的页面中心?

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

一个涉及2d变换的简单解决方案(X轴和Y轴的负平移值):

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.

这就是全部:不需要使用javascript或嵌套元素,来定义父容器的高度或使用棘手的显示属性。

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

进一步参考:http://css-tricks.com/centering-percentage-widthheight-elements/

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

浏览器支持:http://caniuse.com/transforms2d(不适用于IE <= 8)

#2

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:

如果你想让它在绝对中心,x和y,你需要在样式中改变它:

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

#3

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

display:table是实现此目的的最简单方法。见这里: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;
                    }

#4

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

我会这样做。对于HTML,在内容周围添加.wrapper容器:

<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:

假设你想要居中这是一个页面(视口),我会使用以下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.

将显示类型设置为#container的表,并使用绝对定位使其延伸到视口的边缘。

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.

将.wrapper设置为显示类型表格单元格,将高度设置为100%,然后使用vertical-align:middle获得垂直居中,使用text-align:center进行水平居中。

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

演示小提琴:http://jsfiddle.net/audetwebdesign/mBDcg/

#1