screen_html/css_WEB-ITnose 上で DIV の水平方向と垂直方向の中央揃えを実現する css
Jun 24, 2016 am 11:26 AM
CSS を使用して全画面で div を水平方向と垂直方向に中央揃えにする方法 この章では、Web ページ全体で div 要素を水平方向と垂直方向に中央揃えにする方法を紹介します。 。
コードは次のとおりです:
<!DOCTYPE html> <html> <head> <title>css 实现DIV水平垂直居中于屏幕</title><style type="text/css"> body{ margin:0px; padding:0px; } #thediv{ width:100px; height:100px; background:green; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px;}</style> </head> <body> <div id="thediv"></div></body> </html>ログイン後にコピー
オンラインで実行
上記のコードは、Web ページで div の全画面中央揃え効果を実現します。ここでは、その実装プロセスを簡単に紹介します。
実装原理:
div要素を絶対配置に設定し、その左右の属性値をそれぞれ50%に設定します。このとき、divは中央に配置されません。 div の値なので、さらにそれを上と左に一定の距離（それぞれ高さと幅の半分）だけ引き上げる必要があります。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気の記事
2つのポイント博物館：バングルワシュタランドロケーションガイド
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
人気の記事
2つのポイント博物館：バングルワシュタランドロケーションガイド
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7116
9
7116
9
Java チュートリアル
1534
14
1534
14
Laravel チュートリアル
1254
25
1254
25
PHP チュートリアル
1205
29
1205
29
CakePHP チュートリアル
1153
46
1153
46
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
IFramesを使用することのセキュリティへの影響は何ですか？また、どのようにそれらを軽減できますか？
Mar 18, 2025 pm 02:51 PM
IFramesを使用することのセキュリティへの影響は何ですか？また、どのようにそれらを軽減できますか？
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
HTML5＆lt; meter＆gt;を使用するにはどうすればよいですか 範囲内に数値データを表示する要素？
Mar 12, 2025 pm 04:08 PM
HTML5＆lt; meter＆gt;を使用するにはどうすればよいですか 範囲内に数値データを表示する要素？
