Flexbox または CSS の配置を使用してテキストを画像の中央に配置するにはどうすればよいですか?

Flexbox を使用して画像上でテキストを中央揃えにする

質問: Flexbox を使用して画像上でテキストを中央揃えにするにはどうすればよいですか? ?

代替案解決策:

Flexbox の使用はオプションですが、テキストを画像の中央に配置する必要はありません。 CSS 位置プロパティは、より簡単な解決策を提供します。

.height-100vh {
    height: 100vh;
    position: relative;
}

.text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

1. CSS コンテナを確立する: どちらの方法でも、コンテンツを配置するには CSS コンテナ (高さ-100vh) が必要です。
2. 絶対配置: テキスト要素はコンテナ内で絶対的に配置されます。
3. 水平方向および垂直方向の配置: 左: 50%;そしてトップ：50％。テキスト要素を水平方向と垂直方向の中央に配置します。
4. 正確なセンタリング: 変換プロパティは、要素を両方の軸で 50% 後方に移動することで位置を微調整します。

フレックスボックス解決策:

Flexbox を使用する場合、テキストを中央に配置する方法は次のとおりです。画像:

.height-100vh {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

1. フレックス コンテナ: コンテナ (高さ-100vh) は、垂直フレックス方向のフレックス コンテナとして設定されます。
2. テキストの配置: 前と同様、テキスト要素は絶対的に配置され、左: 50%、上: 50%、および変換: トランスレート(-50%, -50%)。
3. 主軸の配置: align-items: center;フレックス コンテナ内のコンテンツを垂直方向の中央に配置します。

どちらの方法でも機能しますが、CSS の位​​置決めアプローチの方が簡単で、画像上にテキストを配置するときに Flexbox を使用する必要がなくなります。

以上がFlexbox または CSS の配置を使用してテキストを画像の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。