CSSは位置+マージンを使用して、固定ボックスの水平および垂直の中央揃えの方法を実現します。
|
margin:auto; + position: absolute; 上、下、左、右:0
<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<メタ文字セット="utf-8">
<meta name="ビューポート" content="初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ" />
<title>位置 + マージンを使用してボックスを水平方向と垂直方向に固定します</title>
<スタイル>
体 * {
アウトライン: 1px #ff0000 実線;
}
。父親 {
幅: 500ピクセル;
高さ: 300px;
位置: 相対的;
}
.父 .息子 {
幅: 180ピクセル;
高さ: 140px;
/* */
位置: 絶対;
右: 0;
下部: 0;
上: 0;
左: 0;
マージン: 自動;
}
</スタイル>
</head>
<本文>
<div class="父">
<div class="son">margin:auto + 上、下、左、右:0</div>
</div>
</本文>
</html>//終わり CSS で位置 + マージンを使用して固定ボックスの水平および垂直の中央揃えを実現する方法については、これで終わりです。CSS で固定ボックスの水平および垂直の中央揃えに関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: DockerはMysql、.Net6、Sqlserverなどのコンテナをデプロイします
>>: Sublime Text - ブラウザのショートカットキーを設定するための推奨方法
![mysql: [エラー] 不明なオプション '--skip-grant-tables'](/upload/images/67cad693833ac.webp)
推薦する
3次元画像配置効果を実現する純粋なCSSのサンプルコード
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
テーブルのネストと境界の結合の問題に対する解決策
【質問】外側のテーブルと内側のテーブルがネストされていて、内側のテーブルと外側のテーブルの両方に境界...
JavaScript配列の一般的なメソッドの詳細な説明
目次元の配列を変更しない方法1. 連結文法：パラメータ:戻り値: 2. 参加する文法：パラメータ:戻...
タブバーのいくつかの実装方法（推奨）
タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...
Linux での透過的巨大ページの使用と無効化の概要
導入コンピューティングのニーズが拡大し続けるにつれて、アプリケーションのメモリに対する需要も増加して...
CSS でよく発生する問題の整理 (ロゴのハッキング/コンテナの固定/画像の垂直方向の中央揃え)
1. IEブラウザモードハックロゴ1. CSSハックロゴコードをコピーコードは次のとおりです。 ie...
Jenkins+tomcat の自動ホットデプロイメント/再起動と発生した問題の解決策 (推奨)
1. 背景同社のプロジェクトは、これまでは手動で Maven でパッケージ化し、サーバーにアップロ...
Linux/Docker で System.Drawing.Common を使用する
序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...
Tencent インタビュー: SQL ステートメントの実行が非常に遅くなる理由は何ですか? ---後悔シリーズは見ないで（推奨）
正直に言うと、この質問には MySQL のコア知識がかなり必要で、コンピュータ ネットワークの知識を...
ins タグと del タグの属性と使用法
insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...
Dockerにlogstashをインストールする詳細な手順
docker-compose.yml を編集し、次のコンテンツを追加します。 バージョン: '...
CentOS での mysql5.7 の詳細なインストールと設定のチュートリアル
インストールユーザーにインストール権限があることを確認してくださいルートスイッチなしsuルート(su...
MysqlチューニングExplainツールの詳細な説明と実践的な演習（推奨）
MySQL チューニング ツールの詳細な説明と実践的な演習の説明 ツールの紹介の説明 分析例の説明...
MySQL トリガー: トリガーの作成と使用
この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...
MySQL 増分バックアップとブレークポイントリカバリスクリプトの例
導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...