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

MySQL berechnet die Anzahl der Tage, Monate und Jahre zwischen zwei Daten

Die in MySQL integrierte Datumsfunktion TIMESTAMP...

Detaillierte Erklärung der Vuex-Umgebung

Inhaltsverzeichnis Erstellen Sie eine Vuex-Umgebu...

Detaillierte Erklärung, wo Docker Protokolldateien speichert

Inhaltsverzeichnis Wo werden die Protokolle gespe...

Analyse des Idea-Compiler-Vue-Einrückungsfehlerproblemszenarios

Projektszenario: Beim Ausführen des Vue-Projekts ...

CentOS 8 offiziell veröffentlicht, basierend auf Red Hat Enterprise Linux 8

Das CentOS-Projekt, ein 100 % kompatibler Neuaufb...

Der Aufruf der Suchmaschine auf der Seite erfolgt am Beispiel von Baidu

Heute ist mir plötzlich eingefallen, dass es cool ...

So handhaben Sie gleichzeitige Aktualisierungen von MySQL-Daten

Wird UPDATE gesperrt? Wird die SQL-Anweisung gesp...

Eine kurze Einführung in MySQL-Datenbankoptimierungstechniken

Eine ausgereifte Datenbankarchitektur ist nicht v...

Analyse des HTTP-Schnittstellentestprozesses basierend auf Postman

Ich habe zufällig ein tolles Tutorial zum Thema k...

Docker erstellt Redis5.0 und mountet Daten

Inhaltsverzeichnis 1. Einfaches Einbinden persist...

Verwenden Sie Docker, um mehrere PHP-Versionen auf dem Server auszuführen

PHP7 ist bereits seit einiger Zeit auf dem Markt ...

Detaillierte Erläuterung des MySQL 5.7.9-Shutdown-Syntaxbeispiels

mysql-5.7.9 bietet endlich eine Shutdown-Syntax: ...