translate(-50%,-50%) in CSS erzielt horizontalen und vertikalen Zentrierungseffekt

translate(-50%,-50%)-Attribute:
Verschieben Sie es um 50 % seiner Länge und Breite nach oben und links, um es zu zentrieren.

Anders als bei der Verwendung von margin zum Zentrieren muss margin seine eigene Breite und Höhe kennen, während translate zentriert werden kann, ohne die Breite und Höhe zu kennen. Der Prozentsatz in der tranlate-Funktion ist relativ zur Breite und Höhe.
(Wenn oben und links 50 % betragen, wird die obere linke Ecke des Fensters als Ursprung verwendet.)

Beispiel:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <style media="Bildschirm">
        .container {
            Position: relativ;
            Breite: 50%;
        }

        .container img {
            Breite: 100 %;
            Anzeige: Block;
            Höhe: automatisch;
        }

        .overlay {
            Breite: 100 %;
            Höhe: 100%;
            Position: absolut;
            links: 0;
            oben: 0;
            rechts: 0;
            unten: 0;
            Deckkraft: 0;
            Übergang: 0,5 s Leichtigkeit;
            Hintergrund: rgb(0, 0, 0);
        }

        .container:hover .overlay {
            Deckkraft: 0,5;
        }

        .text {
            Farbe: weiß;
            Schriftgröße: 20px;
            Position: absolut;
            oben: 50 %;
            links: 50%;
            transformieren: übersetzen(-50 %, -50 %);
            -ms-transform: übersetzen(-50 %, -50 %);
        }
    </Stil>
</Kopf>

<Text>
    <h2>Einblendeffekt</h2>

    <div Klasse="Container">
        <img src="./img/photo2.jpg" alt="Avatar" class="Bild">
        <div Klasse="Overlay">
            <div class="text">Hallo Welt</div>
        </div>
    </div>
</body>

</html>

Wirkung:

Bildbeschreibung hier einfügen

Dies ist das Ende dieses Artikels darüber, wie man mit Translate(-50 %, -50 %) in CSS eine horizontale und vertikale Zentrierung erreicht. Weitere Informationen zur horizontalen und vertikalen Zentrierung mit CSS Translate finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: HTML-Text in vertikalen Spalten anzeigen, um den Text in vertikalen Spalten anzuzeigen

>>: Eine Falle und Lösung bei der Verwendung von fileReader

Details zur MySQL-Transaktionsisolationsebene

translate(-50%,-50%) in CSS erzielt horizontalen und vertikalen Zentrierungseffekt

Details zur MySQL-Transaktionsisolationsebene

Detaillierte Erklärung des Inline-Formats von HTML-Tabellen

Beispiel für die Methode „Mysql implementiert Nullwerte zuerst/letzten“

Detaillierte Erklärung der Verwendung des Bash-Befehls

Zusammenfassung der Linux Logical Volume Management (LVM)-Nutzung

Die perfekte Lösung für das AutoFill-Problem in Google Chrome

JS erkennt den Fall der Eliminierung von Sternen

Verwenden von MySQL unter Windows: Implementieren automatischer zeitgesteuerter Sicherungen

Zwei Methoden der MySql-Kommaverkettungs-Stringabfrage

So platzieren Sie große Bilder auf kleinem Raum einer Webseite

Artikel empfehlen

Beispielcode zur Implementierung eines Karten-Wasserfall-Layouts mit CSS3-Spalten

So prüfen Sie, ob Daten vorhanden sind, bevor Sie sie in MySQL einfügen

Implementierungsbeispiel zum Hochladen mehrerer Anhänge in Vue

Wie man die Idee von Vue nutzt, um einen Speicher zu kapseln

Diskussion über Stilanpassung und Browserkompatibilitätsprobleme bei der Verwendung des Eingabeelements [type="file"]

MariaDB-Remote-Login-Konfiguration und Problemlösung

Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?

So entfernen Sie MySQL aus Ubuntu und installieren es neu

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22 winx64

Implementierungscode für mehrzeilige Textkomponenten der Vue-Faltanzeige

Beispiel für den Import von Nginx-Protokollen in Elasticsearch

Über die 4 Zusatzfunktionen von Vuex

Eclipse konfiguriert Tomcat und Tomcat hat eine ungültige Port-Lösung

Beispiel für die Erzeugung eines Flügelschlags eines Schmetterlings mit reinem CSS3

Tutorial zur Installation einer MySQL-ZIP-Datei