CSSは高さを設定せずにdivを完全に中央に配置することを実現します
必要とする
分析する
コード
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>ドキュメント</title>
<スタイル>
体{
パディング: 0;
マージン: 0;
}
＃箱{
幅: 50%;
/* div を中央に配置する */
位置: 相対的;
変換: translate(50%, 25%);
/* */
/* ここでは、div の高さが body の幅の半分で、テキストが垂直方向に中央揃えになる問題を解決します */
パディング上部: 25%;
パディング下部: 25%;
行の高さ: 0;
テキスト配置: 中央;
/* */
背景色: #111;
色: #fff;
}
</スタイル>
</head>
<本文>
<div id="ボックス">
ボックス123
</div>
</本文>
</html>効果
CSS を使用して高さを設定せずに div を完全に中央に配置する方法についての記事はこれで終わりです。CSS を使用して高さを設定せずに div を完全に中央に配置する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: JavaScript エラー処理 try..catch...finally + は throw+TypeError+RangeError をカバーします
>>: MySQL での Truncate の使用法の詳細な説明
推薦する
Vueナンバープレート入力コンポーネントの使い方の詳しい説明
参考までに、シンプルなナンバープレート入力コンポーネント（vue）です。具体的な内容は次のとおりです...
初心者向けウェブサイト構築チュートリアルの概要
これら 6 つの記事を書いた後、私は少し混乱し始めました。次にどこに書けばいいのか分かりません。ドメ...
Vue から React への変換入門ガイド
目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...
SQL グループ化により重複を削除し、他のフィールドで並べ替える
必要：あるフィールドの同一項目を結合し、別の時間フィールドで並べ替えます。例：初めに テーブルから都...
Linuxにgitをインストールする方法
1. はじめにGit は、規模の大小を問わずあらゆるプロジェクトを俊敏かつ効率的に処理するために使用...
Vue elementUI はツリー構造テーブルと遅延読み込みを実装します
目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...
1 つの記事で v-model とその修飾子を学ぶ
目次序文v-model の修飾子:怠け者トリム番号さまざまな入力タイプやその他の要素での v-mod...
Dockerはnginxをデプロイし、フォルダとファイル操作をマウントします
この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...
CSS3 でクールなスライス画像カルーセル効果を実現
今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...
clipboard.js の使用法の概要
目次（１）はじめに： （２）クリップボードの内容をコピーする方法は次のとおりです。 （３）関数演算に...
IEの送信フォームの記録履歴クリックリターン情報を実現するためのCSSスタイルコントロールはまだ残っています
これは主に CSS スタイルのコントロールと META タグです。コードをコピーコードは次のとおりで...
Linux での mysql8.018 のインストールと設定のプロセスの詳細な説明
Windowsでのインストールの紹介：こちらもご覧ください –》WindowsでのMySQL 8.0...
zabbix 4.04 の詳細なインストール チュートリアル (CentOS 7.6 ベース)
1. インストール前の準備: 1.1 JDKをインストールするopenjdkをアンインストールする...
JS配列メソッドsome、every、findの使用に関する詳細
目次1. いくつか2. すべての3. 見つける1. いくつかsome()メソッドは、指定された関数の...
インターネット接続なしでLinux Centos7にアプリケーションをインストールする方法の詳細な説明
1. 前の章では、プログラムを yum リポジトリに直接インストールできることを学びましたが、そのた...