Div コンテンツを垂直方向に中央揃え_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Div コンテンツを垂直方向に中央揃え_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:45:08

オリジナル

883 人が閲覧しました

フィーリング CSS ハックできる楽しい場所がたくさんあります。

Divに表示したいコンテンツを垂直方向の中央に配置する、シンプルで奇妙な方法を考えました。

flexbox、JS、Less、Scss、回転、前、後を使用する代わりに。

コンテナの先頭に「コンテンツ領域」と同じサイズのdivを挿入し、「コンテンツ領域」のbottomを親の

の50%に設定できます。最終的な計算後、「コンテンツ領域」が上から下まで等距離であることがわかります。

<html>    <head>            <style type="text/css">                          #container {                        position: relative;                left: 200px;                top: 100px;                width: 100px;                height: 400px;                background-color: #7873fa;            }                        #offset-head {                            height: 50px;                   }                        #offset-body {                width: 100px;                height: 350px;                     position: relative;            }                   #show {                width: 100px;                height: 50px;                background-color: #ffbc3e;                position: absolute;                bottom: 50%;            }                    </style>              </head>    <body>         <div id="container">                   <div id="offset-head"></div>            <div id="offset-body">                <div id="show"></div>                        </div>        </div>             </body></html>

ログイン後にコピー

しかし、コードが変更されると、例えば:

黄色を変更します

show
) を調整する必要がある場合

offset-head

の

高さ

により、showは両方のoffset-headの高さと同じ高さになります。 containerの高さを変更する場合、

offset-body

の高さをcontainer.height - offset-head.height に変更する必要があります