JavaScript - CSS は div を常に水平方向と垂直方向の中央に配置するように制御しますが、この div のサイズは異なります

Question

cssコントロールでクラス名を統一したpを追加し、中央に縦横に表示させたいのですが、pの大きさが異なるためcssを修正できません。良いアイデア？＃＃＃

Answer 1

フレックスレイアウト

リーリー

Answer 2

1 つは、フレックス レイアウトを使用して子要素を水平方向と垂直方向に中央に配置することです。もう 1 つは、絶対配置と変換を使用して位置を移動することです。
.flex {
表示: flex;
align-items: center;
justify-content: center;
}

.one {
位置:絶対;
左:50%;
上:50%;
変換:translate(-50%, -50%);
}

ポータル

Answer 3

垂直センタリング:
テーブルレイアウト方式、インラインブロック方式
絶対位置決め方式
ビューポートセンタリング
フレックスボックスベースのソリューション

Answer 4

よくある質問ですが、海外の誰かがさまざまな状況における垂直方向のセンタリングを整理しています: https://css-tricks.com/center...

コードを直接生成し、IE と互換性があるかどうかを検討します: http://howtocenterincss.com/

翻訳版もチェックできます: https://github.com/chenjsh36/...

これを読んだら、垂直方向のセンタリングに関するさまざまな問題 23333 について心配する必要がなくなります

Answer 5

display:flex,align-items:centerを親要素に追加します

Answer 6

上記の伸縮性のあるレイアウトを使用できますが、低レベルのブラウザーはサポートされていません。
絶対位置を使用して p を垂直方向と水平方向に中央揃えにすることができます

リーリー

Answer 7

フレックスレイアウトもおすすめ

Answer 8

さまざまな弾性層?色々な計算？左右のセンタリングは簡単です

margin:0 auto;
でも大丈夫ですが、上り下りが少し面倒です。色々と面倒ですが

1. js から判断すると、これは比較的面倒なので、js を簡単に理解できる友達はそれを行うことができます

2、disable:table。これには 2 つの DOM の連携が必要ですが、メインの互換性も平均的です。

3. 互換性を考慮せず、高さがわからない場合は、transfrom を使用することを強くお勧めします。おおよその方法は以下の通りです

.dom{

幅を自分で定義します
position:absolute;
transform:translate(-50%, -50%);
left:50%;
top:50%;
}
幅はわかっていますが、これをどれだけお勧めするかわかりません

4. 幅と高さがわかっている場合は、上記のコードは互換性がないため、必要ありません。

.dom{

幅と高さを自分で定義します
位置:絶対;
マージン:自動;
上:0;
右:0;
下:0;
左:0;
}
5、フレックスレイアウト、互換性に加えて、それ以外はすべて問題ありません。

リーリー

</p>

.マスク{
リーリー

}

.マスクコン{
リーリー

}

6. 互換性を検討している場合 ====> 最初の項目を確認してください。 [何年目ですか? まだ IE789 を検討していますが、メインの IE7 DOM1 サポートはあまり良くありません。 。 。 】
7、他には何もありません。上記のもので間違いなく十分です。良いものがあれば追加してください

Answer 9

親要素

リーリー

子要素

リーリー

Answer 10

さらに 3 つのメソッドを追加しました。

• 絶対位置または固定位置を使用して、幅と高さが既知の要素を中央に配置します:

  リーリー

• レイアウト中心の要素を採用し、無制限の幅と高さをサポートし、IE8+ およびその他の最新のブラウザーと互換性があります:display: table リーリー

• 疑似要素は行の高さを拡張します (モーダルコンポーネントの AmazeUI で使用されるメソッドで、不確実な幅と高さをサポートします、IE8 以降)::before リーリー