CSSは位置+マージンを使用して、固定ボックスの水平および垂直の中央揃えの方法を実現します。

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の一般的なバックアップコマンドとシェルバックアップスクリプトの共有

複数のデータベースをバックアップするには、次のコマンドを使用できます。 mysqldump -uro...

MySQLのイベントスケジューラEVENTを理解する

MySQL のイベント スケジューラ EVENT は、Unix crontab や Windows ...

Alibaba Cloud SSHリモート接続がしばらくすると切断される問題を解決

問題の再現Alibaba Cloud Server は、Finalshell リモート接続を使用して...

MySQL InnoDB インデックス拡張の詳細な説明

インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...

HTML/CSS での空白処理とページ内の空白を保持する方法

HTML の空白ルールHTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続する...

LinuxでIPアドレスを手動で設定するための詳細な手順

目次1.まずネットワークカードの設定ディレクトリに入る2. ifcfg-ens33ネットワークカード...

Vue で親コンポーネントから子コンポーネントにデータを渡すいくつかの方法

最近、Vue のソースコードを勉強していて、Vue で親コンポーネントと子コンポーネント間でデータを...

case when文のエラー問題の詳細な説明

序文MySQL データベースでは、if else のような判断演算を使用することがあります。では、M...

MySqlデータベースをバックアップするいくつかの方法

mysqldump ツールのバックアップデータベース全体をバックアップする $> mysqld...

Centos7にnginxをインストールする方法

必要な環境をインストールする1. gccのインストールnginx をインストールするには、公式サイト...

Linux は、ディレクトリが存在するかどうかを判断するために if を使用します。

Linux で if を使用してディレクトリが存在するかどうかを判断する方法方法は次のとおりです。...

iptables の再起動後に Docker の iptables ルールの完全なプロセスが失われる

原因と結果1. ansibleコマンドを使用してジャンプサーバー上のマシンBをテストすると、次のエラ...

VueはPCカメラを呼び出して写真機能を実現します

この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...

数千万のMySQLデータ量を素早くページ分割する方法

序文バックエンド開発では、一度に大量のデータがロードされ、メモリやディスク IO のオーバーヘッドが...

MySQL の結合テーブルにインデックスを作成する方法

この記事では、MySQL で 2 つのテーブルを関連付ける結合テーブルにインデックスを作成する方法を...