要素の水平方向と垂直方向の中央揃えを設定する 2 つの方法は何ですか?

水平方向と垂直方向の中央にモーダルポップアップボックスを作成するという小さな要件は、私たちのようなフロントエンドにとって一般的なはずです。

CSS3 が登場する前は、要素を水平方向と垂直方向の中央に配置する (私が思いついた) 唯一の方法は、JS 計算を使用して要素を画面の中央に配置することでした。この方法は不器用で面倒です。

次の 2 つの方法では、要素を画面の中央にすばやく配置できます。

フレックスレイアウト

<style>
    .flex-mask {
        display: flex;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        align-items: center;　　// 垂直居中
        justify-content: center;　　// 水平居中
        background: rgba(0,0,0,.5);
    }
    .flex-box {
        width: 500px;
        height: 300px;
        background-color: #fff;
        border-radius: 10px;
    }
</style>

<!-- 元素 -->
<p class="flex-mask">
    <p class="flex-box"></p>
</p>

翻訳を使用

c9ccee2e6ea535a969eb3f532ad9fe89
    .transform-box {
        position: fixed;
        z-index: 2;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 150px;
        background-color: red;
        border-radius: 10px;
        transform: translate(-50%, -50%);
    }
531ac245ce3e4fe3d50054a55f265927
1496b9ead66877b9376ec97ce364601494b3e26ee717c64999d7867364b1b4a3

以上が要素の水平方向と垂直方向の中央揃えを設定する 2 つの方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。