紅穆ノート
レコメンド 言語ノート CSSの絶対位置設定による中央揃え
言語ノート CSS

CSSの絶対位置設定による中央揃え

CSSの絶対位置設定による中央揃え

CSSにおける絶対位置設定による中央揃えの実現方法は多数存在します。以下では、この機能を実現する4つの方法を紹介します。

1. 一般的なCSSにおける「絶対位置設定による中央配置」の適切な実装方法:


.conter{
  width:600px;height:400px;
  position:absolute;left:50%;top:50%;
  margin-top:-200px;/*高度的一半*/
  margin-left:-300px;/*宽度的一半*/
}

注意:この方法には明確な欠点があります。つまり、要素のサイズを事前に把握している必要があります。そうでなければ、`margin`の負値を正確に調整することはできません。この場合、通常、JSを用いて取得する必要があります。

2. CSS3の登場により、より優れた解決策が提供されました。すなわち、「margin」の代わりに「transform」を使用する方法です。`transform`における`translate`のパーセンテージ値は、その要素のサイズを基準としています。この方法を用いて、CSSによる絶対位置設定による中央配置を実現できます:


.conter{
  width:600px;height:400px;
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);/*50%为自身尺寸的一半*/
}

3. `margin: auto`:絶対位置設定を適用した要素を中央に配置する(上・下・左・右の各方向の位置を0に設定する;`margin: auto`)


.conter{
  width:600px;height:400px;
  position:absolute;left:0;top:0;right:0;bottom:0;
  margin:auto;/*有了这个就自动居中了*/
}

4. CSS3のボックスモデル(Flexレイアウト)を使用して、CSSの絶対位置設定による中央配置を実現します。この方法は、低バージョンのブラウザを考慮しない場合に使用可能です。

微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ クリエイター: 紅穆

ウェブサイト管理者 · ご覧いただきありがとうございます!さらに多くの魅力的なコンテンツをお楽しみいただけますよう、引き続きご支援をお願いいたします。

著者プロフィール プロフィールを見る →

関連記事

CSSの位置指定(position)

CSSの位置指定(position) 言語ノート CSS

構文:`position:static | relative | absolute | fixed | center | page | sticky`;デフォルト値:`static`;適用対象:`display` 属性が `table-column-group` または `table-column` に設定されていないすべての要素;継承性:なし;アニメーション:無…
👁 127
CSSの `vh` および `vw` の自動調整

CSSの `vh` および `vw` の自動調整 言語ノート CSS

モバイル端末では、REMをルートHTMLに対して使用してレイアウトを変更し、JSを用いてモバイル対応を実現します。一方、本記事では純粋なCSSのビューпор単位(vwおよびvh)を用いて自動的にレイアウトを適応させます。現在、この手法の互換性は完全には確実とは言えませんが、それでもvwやvhの強力な機能を理解することは十分に可能です。レスポンシブレイアウトの実現にはメディアクエリ(Media Queries)が用いられ、主流のデバイスの幅をブレークポイントとして設定します…
👁 359

おすすめ読書

PHPウェブサイト用サムネイル生成ツール

PHPウェブサイト用サムネイル生成ツール 実用収集 ウェブサイトのソースコード

どう言おうか…あまり使わない、使う時こそ見つからないソースコードです!このソースコードを探し出すのは今まさにn回目です。長い時間をかけて探した末、ついに見つかりました!本当に素晴らしいです!以下にソースコードを共有します:🔒 隠し内容:コメントを残すとリンクを確認できます:https://pan.baidu.com/s/1-IrG92CbRlFsMzgYMHcM0A?pwd=79ga 提取…
👁 477
WordPressのデータベースは正常に更新されたはずなのに、クエリを実行した際にデータが元の状態に戻ってしまう。これはなぜでしょうか?

WordPressのデータベースは正常に更新されたはずなのに、クエリを実行した際にデータが元の状態に戻ってしまう。これはなぜでしょうか? プログラムノート wordpress

この状況は、通常、WordPressでキャッシュメカニズムが使用されていることに起因します。WordPressで更新操作を実行すると、$wpdbオブジェクトがデータをメモリに格納します。その後、同じデータを再度クエリする際には、データベースからではなく、まずメモリからデータを取得します。このキャッシュメカニズムはクエリ性能を向上させる一方で、データ更新後もその変更が即時反映されないという問題を引き起こす可能性があります。この問題を解決するには…
👁 205
中医学において、「行漿後下痢」とはどのような意味でしょうか?

中医学において、「行漿後下痢」とはどのような意味でしょうか? 趣味 中医学用語

「行漿後泄瀉」は中医学の用語であり、特定の補養薬を服用したか、あるいは特定の食品を摂取した後に下痢が生じる現象を指す。ここで「行漿」とは、補養薬の服用により体内に補養性液が循環する状態を意味し、「泄瀉」とは排泄物の希薄化または頻発を意味する。中医学では、このような症状が現れる原因として、補養薬が過度に寒性であるか、あるいは補養性が強すぎることで、胃腸に刺激を与え、下痢を引き起こすことが挙げられる。また、一部の補養薬…
👁 233
(PC+WAP)pbootCMS – 緑色エネルギー・省エネ・環境保護関連企業向けウェブサイトテンプレート|大画面・スクロール式ウェブサイトソースコードダウンロード(0010)

(PC+WAP)pbootCMS – 緑色エネルギー・省エネ・環境保護関連企業向けウェブサイトテンプレート|大画面・スクロール式ウェブサイトソースコードダウンロード(0010) 実用収集 pbootcmsテンプレート

ワイドスクリーンのスクロール機能を搭載したPbootCMS企業用ウェブサイトテンプレートです。環境エネルギーおよび省エネ・環境保護分野を主軸としており、PCおよびWAP両端でご利用いただけます。モダンなデザインスタイルと強い視覚的インパクトにより、環境技術や新エネルギー製品を紹介する企業に最適です。全画面スクロール効果を活用して、ブランドストーリーや製品の強みを生き生きと表現し、ユーザーの閲覧体験を向上させます。テンプレート表示・インストール手順:ウェブサイトの管理コンソール:/admin.php|ユーザー名:a…
👁 62
(スマートフォン向け適応型)簡体字・繁体字両言語対応・レスポンシブHTML5ベースの汎用金融資本コンサルティングウェブサイト用単ページPBootCMSテンプレート(0594)

(スマートフォン向け適応型)簡体字・繁体字両言語対応・レスポンシブHTML5ベースの汎用金融資本コンサルティングウェブサイト用単ページPBootCMSテンプレート(0594) 実用収集 pbootcmsテンプレート

簡体字・繁体字両言語対応のレスポンシブ型汎用金融資本コンサルティング用1ページWP BootCMSテンプレートです。PCおよびWAP端末に対応しています。プロフェッショナルなマーケティングデザインを採用しており、金融コンサルティングや資本サービスを提供する企業がオンラインでのプロモーションや顧客獲得に最適です。簡体字・繁体字両言語に対応しているため、台湾海峡両岸市場への展開にも適しています。テンプレート表示・インストール手順:ウェブサイトバックエンド:/admin.php|ユーザー名:admin|パスワード:admin|解凍用パスワード:www.4s5.cn…
👁 45