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 - ブラウザのショートカットキーを設定するための推奨方法
推薦する
タグのhref属性とonclickイベントの使用例
a タグは主にページ ジャンプを実装するために使用され、これは href 属性または onclick...
Vueはプライベートフィルターと基本的な使用法を定義します
プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルタ...
Vue-router プログラムナビゲーションの 2 つの実装コード
ページをナビゲートする2つの方法宣言型ナビゲーション: リンクをクリックしてナビゲーションを実現する...
JS 非同期スタック トレース: await が Promise よりも優れている理由
概要async/await と Promise の基本的な違いは、await fn() は現在の関数...
フロントエンド開発者に何百万ドルもの価値をもたらす 10 のスキル
フロントエンド開発者が習得する必要のあるスキル。これらのスキルにより、フロントエンド開発者の価値は数...
JavaScriptのプロトタイプオブジェクトを徹底的に理解しましょう
目次1. プロトタイプとは何ですか? 1.1 関数プロトタイプオブジェクト1.2 コンストラクタを使...
MySQL インデックスの種類 (通常、ユニーク、フルテキスト) の説明
MySQL のインデックスの種類には、通常のインデックス、一意のインデックス、全文インデックスがあり...
MySQLのインストールと設定に関する詳細なチュートリアル
目次インストール不要のMySQLバージョン1. インストール パッケージをダウンロードします。 2....
Docker nginxのインストールと設定方法
DockerでNginxイメージをダウンロードする docker プル nginx Docker イ...
プレーヤー機能を実現するためのvue + element uiのサンプルコード
効果画像のない表示は単なる空虚な言葉です。 1. オーディオをベースにし、elementUI と組み...
ダッシュボードを実装するためのjQueryプラグイン
jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。一般...
CSS における XHTML タグの対応する属性と使用法
XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気...
VSCode と SSH を使用したリモート開発
0. リモート開発が必要な理由組み込み Linux を開発する場合、便宜上、通常は Windows ...
Windows 10 での Tomcat のインストールと展開に関する詳細なチュートリアル
目次1 Java環境の設定2 tomcatのインストールと展開Tomcat をインストールして展開す...
DockerにMySQL 8.0をインストールする方法
環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....