JavaScript - CSS は div を常に水平方向と垂直方向の中央に配置するように制御しますが、この div のサイズは異なります
cssコントロールでクラス名を統一したpを追加し、中央に縦横に表示させたいのですが、pの大きさが異なるためcssを修正できません。良いアイデア？＃＃＃
cssコントロールでクラス名を統一したpを追加し、中央に縦横に表示させたいのですが、pの大きさが異なるためcssを修正できません。良いアイデア？＃＃＃
过去多啦不再A梦2017-06-26 10:54:35
1 つは、フレックス レイアウトを使用して子要素を水平方向と垂直方向に中央に配置することです。もう 1 つは、絶対配置と変換を使用して位置を移動することです。
.flex {
表示: flex;
align-items: center;
justify-content: center;
}
.one {
位置:絶対;
左:50%;
上:50%;
変換:translate(-50%, -50%);
}
ポータル
扔个三星炸死你2017-06-26 10:54:35
垂直センタリング:
テーブルレイアウト方式、インラインブロック方式
絶対位置決め方式
ビューポートセンタリング
フレックスボックスベースのソリューション
过去多啦不再A梦2017-06-26 10:54:35
よくある質問ですが、海外の誰かがさまざまな状況における垂直方向のセンタリングを整理しています: https://css-tricks.com/center...
コードを直接生成し、IE と互換性があるかどうかを検討します: http://howtocenterincss.com/
翻訳版もチェックできます: https://github.com/chenjsh36/...
これを読んだら、垂直方向のセンタリングに関するさまざまな問題 23333 について心配する必要がなくなります
巴扎黑2017-06-26 10:54:35
上記の伸縮性のあるレイアウトを使用できますが、低レベルのブラウザーはサポートされていません。
絶対位置を使用して p を垂直方向と水平方向に中央揃えにすることができます
PHP中文网2017-06-26 10:54:35
さまざまな弾性層?色々な計算？左右のセンタリングは簡単です
margin:0 auto;
でも大丈夫ですが、上り下りが少し面倒です。色々と面倒ですが
1. js から判断すると、これは比較的面倒なので、js を簡単に理解できる友達はそれを行うことができます
2、disable:table。これには 2 つの DOM の連携が必要ですが、メインの互換性も平均的です。
3. 互換性を考慮せず、高さがわからない場合は、transfrom を使用することを強くお勧めします。おおよその方法は以下の通りです.dom{
幅を自分で定義します
position:absolute;
transform:translate(-50%, -50%);
left:50%;
top:50%;
}
幅はわかっていますが、これをどれだけお勧めするかわかりません
.dom{
幅と高さを自分で定義します
位置:絶対;
マージン:自動;
上:0;
右:0;
下:0;
左:0;
}
5、フレックスレイアウト、互換性に加えて、それ以外はすべて問題ありません。
リーリー
</p>.マスク{
リーリー
.マスクコン{
リーリー
6. 互換性を検討している場合 ====> 最初の項目を確認してください。 [何年目ですか? まだ IE789 を検討していますが、メインの IE7 DOM1 サポートはあまり良くありません。 。 。 】
7、他には何もありません。上記のもので間違いなく十分です。良いものがあれば追加してください
習慣沉默2017-06-26 10:54:35
さらに 3 つのメソッドを追加しました。
絶対位置または固定位置を使用して、幅と高さが既知の要素を中央に配置します:
リーリーレイアウト中心の要素を採用し、無制限の幅と高さをサポートし、IE8+ およびその他の最新のブラウザーと互換性があります:display: table
リーリー
疑似要素は行の高さを拡張します (モーダルコンポーネントの AmazeUI で使用されるメソッドで、不確実な幅と高さをサポートします、IE8 以降)::before
リーリー
