CSS を使用してコンテンツを垂直方向に中央揃えする N-in-one の方法。 _html/css_WEB-ITnose

css+div を使用してページのコンテンツを水平方向に中央揃えにする方法は誰もがよく知っていますが、コンテンツを垂直方向に中央揃えするにはどうすればよいでしょうか?

さて、本題に入りましょう。高校の数学の問題を解くときによく使われるアイデアを使ってみませんか。ケースバイケースで話し合ってみましょう。

1. 垂直方向中央に配置する DIV の高さと幅がわかっている場合:

1.1 絶対配置方法:

CSS :

りー

html:

    .middle-div{           width:300px;           height:200px;           position:absolute;           left:50%;           top:50%;           margin:-100px 0 0 -150px      }     .parent-div{          position:relitive;     }

この方法は水平センタリングと垂直センタリングを実現します。ただし、多くの制限があります。最も明らかな欠陥は、中央揃えの DIV がフロー レイアウトから外れるという点です。そのため、このメソッドは、jquery で使用されます。

    <div class="parent-div">        <div class="middle-div">            <p>我是个高度已知的DIV，我里面的内容可以垂直+水平居中吗？</p>        </div>    </div>

1.2 外部DIVメソッド:

CSS:

❤️

1.3 margin:autoメソッド

CSS:

この方法は比較的簡単ですが、残念ながらIE6～7では無効です。

rree rree

rree

rree

rree

    $(".mydiv").css({               position: "absolute",                left: ($(window).width() - $(".mydiv").outerWidth())/2,                top: ($(window).height() - $(".mydiv").outerHeight())/2     });  

    .floater{        float:left;        height:50%;        margin-bottom:-120px;    }    .middle-div{        clear:both;        height:240px;        position:relitive;        background:#eee;    }

rree

    <div class="floater"></div>    <div class="middle-div"></div>

    #content {        position:absolute;        top:0;        bottom:0;        left:0;        right:0;        margin:auto;         height:240px;         width:70%;          background:#eee;    }        

RREE RREE RREE RREE RREE RREE RREE RREE

RREE

RREE RREE RREE RREE

RREE RREE RREE RREE RREE

RREE

RREE RREE RREE

RREE

RREE RREE RREE RREE RREE RREE RREE RREE

RREE

 <div id="content"> </div>

<strong>2.当待垂直居中的对象为单行文本或图片，高宽未知时（line-height法）：</strong>

 大家公认的最简洁有效的方法：设置容器height与line-height相等，另外，加上overflow：hidden防止意外发生（此处指的容器内字体大于容器高度时的意外）。<strong>　　CSS：　　</strong>

    p.middle-p{            font:bold 12px/24px Helvertica,Arial,sans-serif;        overflow:hidden;    }     .demo{        height:24px;        color:#fff;        background:#a5a5a5;        font:bold 12px Helvertica,Arial,sans-serif;    }

<strong>　　html：　　</strong>

    <p class="demo middle-p">        文本垂直在P中居中。去掉class中的”middle-p“，再看看效果是什么？添上”middle-p“设置字体大小为30px，看看有什么效果，去掉overflow之后呢？    </p>    

 该方法的缺点是只支持单行，且当<p>中为纯文字时，兼容各浏览器；当<P>中只有图片时，IE7+可使图片垂直居中。然而在FF，chrome和IE6均无效；当<p>中有图片和文字时，在IE6中无效，在IE7+，FF，Chrome下有效。

     让我们试着解决只有图片时，在FF，Chrome等现代浏览器下无效的情况,在上述CSS中增加：

<strong>　　CSS：</strong>

    p:after{        content:',';        font-size:1px;        visibility:hidden;                   }

html :

display: inline-blockを使用しているため、IE6-7とは互換性がありません。