2

ページの中央に div を配置する方法の多くの例を見ましたが、すべての例で div のサイズは固定されていました。
divの高さのサイズが不明なページの中央にdivを配置する方法は?
(中央の灰色の div)

私のコード:

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

編集：

Android と IOS の webView で機能するには、何らかの理由で数字が常にブラウザーの上部に表示される必要があります。
注: ブラウザはフルスクリーンではありません!

スクリーンショットは私の他の質問にあります

4

4 に答える 4

5

divの高さのサイズが不明なページの中央にdivを配置する方法は?

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

親コンテナの高さを定義したり、トリッキーな表示プロパティを使用したりするために、javascript やネストされた要素を使用する必要はありません。

詳細な参照: http://css-tricks.com/centering-percentage-widthheight-elements/

ブラウザのサポート: http://caniuse.com/transforms2d (動作していませんIE<=8)

于 2013-07-31T14:53:50.150 に答える
1

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;
                    }
于 2013-07-31T14:52:21.610 に答える