CSSマスクのフルスクリーン中央揃えを実装する方法

<スタイル>
#トーストローダーフルスクリーン{
    高さ: 100%;
    位置: 絶対;
    上: 0;
    右: 0;
    下部: 0;
    左: 0;
    zインデックス: 99999;
    背景色: rgba(224, 38, 38, 0.5);
}
#トーストローダー{
   位置: 絶対;
   左: 50%;
   上位: 45%
   幅: 350ピクセル;
   左マージン: -19px;
   /* 背景色: 青; */
}
#トーストローダーテキスト{
    位置: 固定;
    トップ：53%
    左: 50%;
    幅: 250ピクセル;
    上マージン: -10px;
    左マージン: -125px;
    word-wrap:break-word; /*自動改行*/
    テキスト配置: 中央;
    /* 背景色: 赤; */
}
</スタイル>
<テンプレート>
    <div id="toastLoaderFullScreen">
        <div>
             <mu-circular-progress id="toastLoader" :size="40" color="rgb(24, 143, 254)" v-show="isToastLoader"></mu-circular-progress>
             <div id="トーストローダーテキスト">
                 <p>ログイン</p>
             </div>
        </div>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ（） {
        戻る {
            isToastLoader: true
        }
    },
    作成された() {
        // タイムアウトを設定する(() => {
        // this.isToastLoader = false
        // }, 2000)
    },
    メソッド: {
    }
}
</スクリプト>