superHu<br> html,body,div {margin: 0;padding: 0}/*、コンテンツ要素の外側に div を挿入します<br> そして設定しますこの div の高さ:50%; マージン-ボトム: -(コンテンツの高さ + パディング)/2;。 </p> <p>たとえば、コンテンツの高さが 100px で、パディングの合計が 20px の場合、margin-bottom: -60px とすると、コンテンツが圧迫されてしまいます。デメリットは意味のないタグが追加されることですが、シンプルで IE6 であることがメリットです。も互換性があります */<br> .box { <br> margin: 20px auto;<br> width: 200px;<br> height: 600px;<br> background: black;<br> }<br> .floater { <br> height:50%;<br> margin-bottom: -50px; <br> }<br> .content { <br> <br> margin: 0 auto;<br> padding: 10px;<br> width: 100px;<br> height: 100px;<br> border: 2px Solid #adf;<br> background: #abc;<br> }<br> </p></style> ;<p> </p> </head><p> <body><br> <div class="box"><br> <div class="floater"></div><br> <div class="content"> ;</div><br> </ div> <br> </body><br></html><br> </p>
ウェブフロントエンド
htmlチュートリアル
並列 div を中央に挿入_html/css_WEB-ITnose
