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 の使用法の詳細な説明
推薦する
MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)
1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...
インデックスを使用して MySQL ORDER BY ステートメントを最適化する方法
テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...
Nginx リバース プロキシと負荷分散を実装する方法 (Linux ベース)
ここで nginx のリバース プロキシを試してみましょう。リバースプロキシ方式とは、インターネット...
MySQLとPythonの相互作用の例
目次1. データを準備するデータテーブルを作成するデータの挿入2. SQLドリル1. SQL文の強化...
MySQL マスタースレーブレプリケーションの実践の詳細説明 - GTID ベースのレプリケーション
GTIDベースのレプリケーション導入GTID ベースのレプリケーションは、MySQL 5.6 以降に...
Dockerは異常なコンテナ操作を排除する
この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...
MySQLコマンドラインでSQLファイルを実行するいくつかの方法
目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...
優れた UI (ユーザー インターフェース) デザイナーになるための 20 の道標
はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...
簡単な手順で純粋な CSS3 で 3D 反転効果を実現
フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ち...
Linux で SSH サーバー エイリアスを作成する 2 つの方法
序文SSH 経由でさまざまなリモート システムに頻繁にアクセスする場合は、このトリックを使用すると時...
linxu での Svn ワンクリック インストール シェル スクリプトの詳細な説明
#!/bin/bash #SVNをダウンロード yum -y サブバージョンをインストールします ...
面接では、select...for update がテーブルをロックするのか、それとも行をロックするのか尋ねられました。
目次確認する：例の検証と組み合わせるselect クエリ ステートメントはロックされませんが、sel...
JavaScript Promise の徹底解説
目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...
Vueシャトルボックスは上下の動きを実現します
この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...
血の写輪眼と輪廻眼の特殊効果コードを実現するためのHTML+CSS
結果 (完全なコードは下部にあります): 実装は難しくありませんが、繰り返しコードが多くなります。実...