CSS透明な親ボックスで変化しないテキスト位置で垂直にサブボックスセンタリングを実現する方法は？

CSSレイアウトでは、透明性とテキストが含まれている親ボックスを実現するには、子ボックスを親ボックス内に垂直に中央に置き、テキストの位置を変更しないようにしますか？これは一般的なCSSレイアウトの問題です。この記事では、この問題を解決し、特定のCSSコードの例を提供する方法を詳細に説明します。

問題の中核は、親ボックスが透明性に設定されているときに、親ボックスのテキストコンテンツに影響を与えることなく、チャイルドボックスを垂直に集中させる方法にあります（不透明：0.2）。不透明な属性を使用すると、子供の要素が透明性を継承します。これは私たちのニーズに反します。

ソリューションの鍵は、絶対的な位置決めと変換：翻訳（-50％）を使用することです。まず、ドキュメントストリームから分離され、親要素に従って配置できるように、子要素を絶対位置（位置：絶対）に設定する必要があります。次に、上部に設定します：50％を子要素の上部を親要素の半分の半分に移動し、変換：翻訳（-50％）を使用して、子要素をその高さの半分に上方に移動させ、それにより垂直の中心を達成します。

親要素の透明性については、すべての子要素の透明性に影響するため、不透明度属性を使用しないでください。代わりに、親要素の背景色は、バックグラウンドカラー：RGBA（255、255、255、0.2）などのRGBA（）色の値を使用して設定する必要があります。これにより、子要素の透明度に影響を与えることなく、親要素の透明度が得られます。

したがって、最終的なCSSコードは、次の構造に似ている必要があります（特定のスタイルは、実際の状況に応じて調整する必要があります）。

 。親 {
  位置：相対; /*親要素は相対的なポジショニングに設定する必要があります*/
  背景色：RGBA（255、255、255、0.2）; /* RGBAを使用して透明性を設定します*/
}

。子供 {
  位置：絶対;
  トップ：50％;
  左：50％;
  変換：翻訳（-50％、-50％）; /*垂直および水平センター*/
}

上記の方法により、サブボックスの垂直センタリング効果を実現しながら、親ボックスの透明度とテキストの位置が変化しないようにします。左の属性を調整すると、水平の中心が実現し、変換することを忘れないでください。翻訳（-50％、-50％）は、水平および垂直の中心を同時に達成できます。

以上がCSS透明な親ボックスで変化しないテキスト位置で垂直にサブボックスセンタリングを実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。