私たちの実際のプロジェクトでは、
垂直方向の中央揃えの方法がたくさんあります。たとえば、モバイル ページには多くの ポップアップ プロンプト コンテンツがあり、それが皆さんのお役に立てれば幸いです。 たくさんのページを作成してきましたが、垂直方向のセンタリングの問題は常に存在していると感じています。いくつかの方法は比較的簡単ですが、いくつかは実際の状況に基づいて計算する必要があると感じています。私が実際に使用した方法は、最も包括的ではないかもしれませんが、実際の効果は依然として良好です。
/* 常用的三种方法 */ /* 第一种 */ div{ width: 200px; height: 200px; margin: auto; background: pink; position: fixed; top: 0; left: 0; right: 0; bottom: 0; } /* 第二种 */ div{ width: 200px; height: 200px; background: green; position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; } /* 第三种 */ div{ width: 200px; height: 200px; background: green; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
関連する推奨事項:
以上が要素の水平方向および垂直方向の中央揃えを実現する CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。