CSSのtranslate(-50%,-50%)は水平および垂直の中央揃え効果を実現します。

translate(-50%,-50%) 属性:
中央に配置するには、長さと幅の 50% だけ上と左に移動します。

margin を使用して中央揃えを実現する場合とは異なり、margin は自身の幅と高さを認識する必要がありますが、translate は幅と高さを知らなくても中央揃えできます。tranlate 関数のパーセンテージは、幅と高さに対する相対値です。
(上と左が 50% の場合、ウィンドウの左上隅が原点として使用されます)。

例：

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル メディア="スクリーン">
        。容器 {
            位置: 相対的;
            幅: 50%;
        }

        .コンテナ画像{
            幅: 100%;
            表示: ブロック;
            高さ: 自動;
        }

        。かぶせる {
            幅: 100%;
            高さ: 100%;
            位置: 絶対;
            左: 0;
            上: 0;
            右: 0;
            下部: 0;
            不透明度: 0;
            遷移: 0.5 秒の緩和;
            背景: rgb(0, 0, 0);
        }

        .container:hover .overlay {
            不透明度: 0.5;
        }

        。文章 {
            色: 白;
            フォントサイズ: 20px;
            位置: 絶対;
            上位: 50%;
            左: 50%;
            変換: translate(-50%, -50%);
            -ms-transform: 変換(-50%、-50%);
        }
    </スタイル>
</head>

<本文>
    <h2>フェードイン効果</h2>

    <div class="コンテナ">
        <img src="./img/photo2.jpg" alt="アバター" class="画像">
        <div class="overlay">
            <div class="text">こんにちは世界</div>
        </div>
    </div>
</本文>

</html>

効果：

ここに画像の説明を挿入

CSS で translate(-50%, -50%) を使用して水平および垂直の中央揃えを実現する方法についての記事はこれで終わりです。CSS translate を使用した水平および垂直の中央揃えの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML 縦列表示テキストを使用してテキストを縦列で表示します

>>: fileReader 使用時の落とし穴と解決策