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 サイトの他の関連記事を参照してください。