ホームページ > 記事 > ウェブフロントエンド > 「Web 開発でボックスを中央に配置するためのいくつかの方法」_html/css_WEB-ITnose
「Web 開発でボックスを中央に配置するためのいくつかの方法」_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:15:241120ブラウズ
1. ボックスの中央揃えのいくつかの方法を記録します: 1.0、マージンの幅と高さを中央に固定、
3.0、絶対位置を中央に配置します。 ;
5.0、中央にフレックス;
7.0、中央に不確定な幅と高さ (絶対位置のパーセンテージ);
8.0、中央に配置。
2 番目、コードのデモ (html は同じデモを使用します): html デモ:
<body> <div id="container"> <div id="box"></div> </div></body>
1.0、マージンは幅と高さを中央に固定 (デモ)
この位置決め方法純粋に幅、高さ、マージンに基づいており、あまり柔軟性がありません。
CSS:
#container { width: 600px; height: 500px; border: 1px solid #000; margin: auto;}#box { width: 200px; height: 200px; margin: 150px 200px; background-color: #0ff;} 2.0、負のマージンのセンタリング (デモ) センタリングには負のマージンを使用します。固定の幅と高さを知る必要があり、制限は比較的大きいです。
CSS:
#container { position: relative; width: 600px; height: 500px; border: 1px solid #000; margin: auto;}#box { position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; margin: -100px -100px; background-color: #0ff;} 3.0、絶対配置とセンタリング (デモ) 非常に一般的な方法である絶対配置とセンタリングを使用します。
CSS:
すごいです
4.0、テーブルセルのセンタリング (デモ)テーブルセルを使用して垂直方向のセンタリングを制御します。
CSS:
すごいです
5.0、フレックスセンタリング (デモ)CSS3 で導入された新しいレイアウト方法が使いやすくなりました。欠点: IE9 と IE9 には互換性がありません。
CSS:
#container { position: relative; width: 600px; height: 500px; border: 1px solid #000; margin: auto;}#box { position: absolute; width: 200px; height: 200px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #0ff;} 6.0、transformcentered (demo) このメソッドは、CSS のtransform属性を柔軟に使用しますが、これは比較的斬新です。欠点は、IE9 では互換性がないことです。
CSS:
#container { display: table-cell; width: 600px; height: 500px; vertical-align: middle; border: 1px solid #000;}#box { width: 200px; height: 200px; margin: 0 auto; background-color: #0ff;} 7.0、不確実な幅と高さのセンタリング (絶対位置決めパーセンテージ) (デモ) この種の不確実な幅と高さのセンタリングはより柔軟です。水平方向のセンタリングを実現するには左右のパーセンテージが同じであることを確認し、垂直方向のセンタリングを実現するには上部と下部のパーセンテージが同じであることを確認してください。
CSS:
#container { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 600px; height: 500px; border: 1px solid #000; margin: auto;}#box { width: 200px; height: 200px; background-color: #0ff;} 8.0、ボタンの中央揃え (デモ) ボタンを外側のコンテナとして使用すると、内部のブロック要素が自動的に垂直方向の中央に配置されます。これを実現するには、水平方向の中央揃えを制御するだけです。の効果。 ...