ホームページ > 記事 > ウェブフロントエンド > Div コンテンツを垂直方向に中央揃え_html/css_WEB-ITnose
Div コンテンツを垂直方向に中央揃え_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:08890ブラウズ
フィーリング 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
) を調整する必要がある場合
の
高さにより、showは両方のoffset-headの高さと同じ高さになります。 containerの高さを変更する場合、
offset-bodyの高さをcontainer.height - offset-head.height に変更する必要があります
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。