ホームページ > 記事 > ウェブフロントエンド > CSS の絶対配置と固定配置を使用して HTML 要素を中央に配置するにはどうすればよいですか?
CSS を使用してモーダル ボックスなどの要素をページの中央に配置しようとする人が多くいますが、失敗し、JS を使用して完成させます。この技術記事では、JavaScript を使用せずに要素を中央に配置する方法を説明します。早速本文に入りましょう。
この方法は比較的単純です。つまり、1 つのラッピング要素を使用するだけではなく、2 つの要素を使用します。 (推奨コース: css ビデオ チュートリアル )
HTML:
<div class="popup"> <div class="wrapper"> some content </div> </div>
CSS:
.popup{ position:fixed; left:50%; }
この CSS は、要素の左側を中央に配置します。ただし、要素の中央の位置に基づいてモーダル ボックスを中央に配置したいと考えています。
次に、トリックなアプローチを見てみましょう。ポップアップには 2 つのラッパーがあるため、内部の div を操作して、相対的に左に -50% 移動するように div に指示できます。また、コンテナ内では、div はのみ移動するためです。サイズの半分を左に移動します。このようにしてモーダルをまとめます。
CSS
.popup .wrapper{ position:relative; left:-50%; }
を追加すると、要素が水平方向の中央に配置され、要素が中央に配置されます。
この記事はここで終了です。さらに興味深いコンテンツについては、PHP 中国語 Web サイトの ビデオ チュートリアル 列に注目してください。 ! !
以上がCSS の絶対配置と固定配置を使用して HTML 要素を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。