So implementieren Sie die zentrierte Ausrichtung einer CSS-Maske im Vollbildmodus

So implementieren Sie die zentrierte Ausrichtung einer CSS-Maske im Vollbildmodus

Der spezifische Code lautet wie folgt:

<Stil>
#toastLoaderFullScreen {
    Höhe: 100%;
    Position: absolut;
    oben: 0;
    rechts: 0;
    unten: 0;
    links: 0;
    Z-Index: 99999;
    Hintergrundfarbe: rgba(224, 38, 38, 0,5);
}
#toastLoader {
   Position: absolut;
   links: 50%;
   oben: 45 %;
   Breite: 350px;
   Rand links: -19px;
   /* Hintergrundfarbe: blau; */
}
#toastLoaderText {
    Position: fest;
    oben: 53 %;
    links: 50%;
    Breite: 250px;
    Rand oben: -10px;
    Rand links: -125px;
    word-wrap:break-word; /*Automatischer Zeilenumbruch*/
    Textausrichtung: zentriert;
    /* Hintergrundfarbe: rot; */
}
</Stil>
<Vorlage>
    <div id="toastLoaderFullScreen">
        <div>
             <mu-circular-progress id="toastLoader" :size="40" color="rgb(24, 143, 254)" v-show="isToastLoader"></mu-circular-progress>
             <div id="toastLoaderText">
                 <p>Anmelden</p>
             </div>
        </div>
    </div>
</Vorlage>
<Skript>
Standard exportieren {
    Daten() {
        zurückkehren {
            isToastLoader: true
        }
    },
    erstellt() {
        // setzeTimeout(() => {
        // dies.isToastLoader = false
        // }, 2000)
    },
    Methoden: {
    }
}
</Skript> 

Zusammenfassen

Oben ist die vom Editor eingeführte Implementierungsmethode für die Vollbild-Zentrierung der CSS-Maske. Ich hoffe, sie ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<:  Einführung in die Verwendung gängiger XHTML-Tags

>>:  Detaillierte Erklärung der Routenkonfiguration von Vue-Router

Artikel empfehlen

So migrieren Sie das Datenverzeichnis in mysql8.0.20

Das Standardspeicherverzeichnis von MySQL ist /va...

Der Button hat einen hässlichen grauen Rand. Wie kann ich ihn entfernen?

Ich habe den Dialog beim Schließen verwendet und e...

Zusammenfassung der Verwendung von setTimeout() in JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Der Unterschi...

Zusammenfassung der JavaScript-Timertypen

Inhaltsverzeichnis 1.setInterval() 2.setTimeout()...

So stellen Sie das Crownblog-Projekt mit Docker in der Alibaba Cloud bereit

Front-End-Projektpaketierung Suchen Sie .env.prod...

Sortierung und Paginierung von MySQL-Abfragen

Überblick Da wir die Daten normalerweise nicht di...

MySQL-Fremdschlüsseleinschränkung (FOREIGN KEY) Fallerklärung

Die MySQL-Fremdschlüsseleinschränkung (FOREIGN KE...

Detaillierte Erklärung der MySQL-Datumsadditions- und -subtraktionsfunktionen

1. addtime() Füge die angegebene Anzahl Sekunden ...

So lösen Sie das Problem der Randüberlappung

1. Zunächst müssen Sie wissen, was den vertikalen ...

Webdesign-Tutorial (1): Schritte und Gesamtlayout

<br /> Hinweis: Alle Texte, mit Ausnahme der...

Eine kurze Diskussion über den Vater-Sohn-Werttransfer in Vue3

Inhaltsverzeichnis Vom Vater zum Sohn: 1. Übergeb...