検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS のみを使用して Div 要素を画面の中央に完全に配置するにはどうすればよいですか?

CSS のみを使用して Div 要素を画面の中央に完全に配置するにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-05 18:29:12929ブラウズ

How Can I Perfectly Center a Div Element on the Screen Using Only CSS?

位置

Pure CSS を使用して要素を画面中央に完璧に配置する

この記事では、

を中央に配置するという一般的な課題に対処します。 (または ) 要素は画面サイズに関係なく表示されます。目標は、残りのスペースをすべての面に均等に分配することです。その方法は次のとおりです。

絶対配置の使用

要素の幅と高さが固定されている場合、絶対配置が最も簡単な方法です。

#divElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

この場合:

  • position:Absolute は通常の要素から要素を取り出しますドキュメント フロー。
  • top: 50% は、要素の上の位置をビューポートの中心に設定します。
  • left: 50% は、要素の左の位置をビューポートの中心に設定します。
  • margin-top: -50px と margin-left: -50px は、内部の位置を調整するために使用されます。 viewport.

注: メンテナンスの問題が発生し、コードの再利用が妨げられる可能性があるため、インライン スタイルは常に避けてください。

JSFiddle での実際の例は次のとおりです: http:/ /jsfiddle.net/S5bKq/.

これらの手順に従うことで、あらゆるものを効果的に中央に配置できます。

または 画面サイズに関係なく、Web ページ上の要素を使用して、視覚的に魅力的なレイアウトを確保します。

以上がCSS のみを使用して Div 要素を画面の中央に完全に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css using this position margin viewport table http
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS グリッドとフレックスボックス: レスポンシブな正方形の作成にはどちらが最適ですか?次の記事：CSS グリッドとフレックスボックス: レスポンシブな正方形の作成にはどちらが最適ですか?

関連記事

続きを見る