ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose の水平方向と垂直方向の中央揃え
CSS_html/css_WEB-ITnose の水平方向と垂直方向の中央揃え
- WBOYオリジナル
- 2016-06-24 11:22:51889ブラウズ
CSS の世界では、ブロック レベルの要素を水平方向に中央揃えにしたい場合、誰もが margin:0 auto; の使用方法を知っていなければなりません。そうすれば、ブロック レベルの要素は親要素の中で水平方向に中央揃えに配置されます。
は次のようにリストされます:
<!DOCTYPE html> <head> <title>center</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .parent { width:50%; height:100px; border:1px solid black; position:relative; } .child { margin:0 auto; width:50px; height:50px; background:#22B14C; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body></html> 実行効果図は次のとおりです。緑の四角形は親要素の水平方向の中心にあります
、では、問題は、緑の四角形を次のようにしたいかということです。垂直方向または水平方向と垂直方向の中央に配置されますか？
margin:auto 0; または margin:auto; を設定するだけで十分ですか?
margin: 0 auto に設定すると水平方向に中央揃えにできるので、私もそう思っていました。
しかし、垂直方向のセンタリングの場合はそうではありません。
通常のドキュメントフローでは、margin:auto を設定すると、ブラウザが解析するときに margin:0 auto;
(margin-top と margin-bottom を 0 に設定し、margin-left と margin を設定します) -right は左右適応に設定されます)。
W3.orgより抜粋
心配な場合は、上記のデモの margin:0 auto; を margin:auto; に置き換えても、操作後の結果は同じになります。
ねえ、ブロック レベルの要素を垂直方向の中央に配置したい場合はどうすればよいでしょうか?
方法 1:
要素を絶対配置に設定します。これにより、要素を通常のドキュメント フローから分離できます。absolute には、要素の表示をブロックに設定するという機能があります。
次に、絶対配置座標 (左、上、右、下) を 0 に設定します。これにより、ブラウザーは絶対配置用に新しいボックス モデルをラップします。
margin と組み合わせると、水平方向の中央揃え (margin:0 auto;)、垂直方向の中央揃え (margin:auto 0;)、水平方向と垂直方向の中央揃え (margin:auto;) を完璧に行うことができます。
以下のデモは「水平方向と垂直方向のセンタリング」です:
<!DOCTYPE html> <head> <title>center</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .parent { width:50%; height:100px; border:1px solid black; position:relative; } .child { margin: auto; position: absolute; top:0; left:0; bottom:0; right:0; width:50px; height:50px; background:#22B14C; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body></html> PS: position:fixed もドキュメント フローから分離できるため、absolute と同じですが、違いは次のとおりです。固定されたものは、ブラウザ ウィンドウの位置に相対的です。
方法 2:
方法 1 は要素のドキュメント フローを変更することですが、そのドキュメント フローを変更する場合はどうでしょうか?
次に、別の方法を見つけて、要素の幅と高さを計算しましょう。
どういう意味ですか？
「垂直方向の中央揃え」を例に挙げます。子要素がある場合、その親要素であるparentを中心に垂直方向の中央揃えにする必要があります。以下の図に示すように、次のとおりです。
CSS はどのように使用すればよいですか?
リスト 2:
(1)、マージン + 絶対値
子を絶対値に設定し、その上部と右側を 50% に設定すると、子要素レイヤーは図 2 の状況を表示します次に、要素の margin-top と margin-right を -50% にすると、垂直方向のセンタリングを実現できます。
サンプルコードは次のとおりです:
rrree
(2)、translate + ABS
子を絶対に設定し、その上部と右側を50%に設定してから、子要素のレイヤーを設定します上の図 2 の状況が表示されます。
要素を 50%、移動して 50% 移動すると、図 3 のように垂直方向のセンタリングを実現することもできます。
サンプルコードは以下の通りです:
<!DOCTYPE html> <head> <title>center</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .parent { width:50%; height:100px; border:1px solid black; position:relative; } .child { position:absolute; width:50px; height:50px; top:50%; left:50%; margin-top:-25px; margin-left:-25px; background:#22B14C; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body></html>
方法 3:
table-cell 属性を使用して簡単に実装できます。親要素を table-cell に変更すると、table 属性vertical-align:middle を使用して要素を垂直方向に中央揃えにし、子要素 margin:0 atuo を設定して水平方向の中央揃えを実現できます。
追記:
table-cell は、display:table 要素に含める必要があります。table-cell は table に属します。
サンプルコードは次のとおりです:
<!DOCTYPE html> <head> <title>center</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .parent { width:50%; height:100px; border:1px solid black; position:relative; } .child { position:absolute; width:50px; height:50px; top:50%; left:50%; <!--渐进增强--> -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background:#22B14C; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body></html> さて、CSS の垂直方向と水平方向の中央揃えについては以上です (フレキシブル レイアウト Flex はこの記事の範囲外です)。
皆さんおやすみなさい〜