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

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)
    },
    メソッド: {
    }
}
</スクリプト> 

要約する

上記は、エディターが紹介したCSSマスク全画面中央揃えの実装方法です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  一般的な XHTML タグの使用方法の紹介

>>:  Vue-Routerのルート設定の詳しい説明

推薦する

Tomcatディレクトリ構造の詳細な説明

目次ディレクトリ構造binディレクトリconfディレクトリlibディレクトリwebapps ディレク...

MySQL ロック(テーブルロック、行ロック、共有ロック、排他ロック、ギャップロック)の詳細な説明

現実世界では、鍵は外の世界から身を隠したいときに使用するツールです。コンピュータでは、複数のプロセス...

uniappは録音アップロード機能を実現

目次uni-app の紹介HTML部分js部分インスタンスを作成する録音を開始録音終了録音を再生再生...

IDEA 2020 で Tomcat サーバーを構成するための詳細な手順

IDEA 2020 で Tomcat を構成する手順は次のとおりです。最初のステップはTomcatを...

一般的なテーブルコンポーネントの Vue カプセル化の完全な手順記録

目次序文テーブル コンポーネントをカプセル化する必要があるのはなぜですか?ステップ1: 共通コンポー...

Dockerコンテナの構築と実行のプロセスの詳細な説明

イメージをプルし、コンテナを作成してコンテナを実行するだけです。 docker run -d --r...

Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)

昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...

JavaScript 関数のパフォーマンスを測定するさまざまな方法の比較

目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...

ログインと登録を実現するSpringboot+VUE

この記事の例では、ログインと登録を実装するためのspringboot+VUEの具体的なコードを参考ま...

Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)

脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...

Vue の this.$store.state.xx.xx に関する簡単な説明

目次これを Vue.$store.state.xx.xxストアからデータを取得する私のプロジェクトフ...

JavaでTomcatサーバーを起動/停止する方法

1. プロジェクト構造 2.Tomcat.javaを呼び出す パッケージ com.calltomca...

TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル

tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...

VUE + OPENLAYERSがリアルタイムポジショニング機能を実現

目次序文1. ラベルスタイルを定義する2. GeoJSONデータのシミュレーション3. Vercto...

docker compose の記述ルールについての簡単な説明

この記事ではクラスタの展開に関連する内容は紹介しませんバージョン制約Docker エンジン >...