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

Detaillierte Erläuterung der Datenübertragung zwischen React-Elternkomponenten und -Kindkomponenten

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

Detaillierte Erläuterung der Datenübertragung zwischen React-Elternkomponenten und -Kindkomponenten

MySQL 8.0.11 Installationstutorial mit Bildern und Text

Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux

Einige Hinweise zur Verwendung von Standard-HTML-Codes bei der Webseitenerstellung

So verwenden Sie Node zum Implementieren des statischen Datei-Cachings

Eine kurze Analyse des Unterschieds zwischen statisch und selbst in PHP-Klassen

MySQL nutzt geschickt Summe, Groß- und Kleinschreibung und Wann, um statistische Abfragen zu optimieren

Zwei Möglichkeiten, den 30-Sekunden-Werbecode aus dem Youku-Video zu entfernen

So verweisen Sie im WeChat-Applet wxss auf externe CSS-Dateien und Iconfonts

Fallstudie zur Implementierung eines jQuery Ajax-Chatbots

Artikel empfehlen

So aktivieren Sie den Fernzugriff in Docker

Grundlegende Verwendung von @Font-face und wie man es mit allen Browsern kompatibel macht

Detaillierte Erklärung der Verwendung und Unterschiede verschiedener Sperrmechanismen in Linux

Lösung für das Problem, dass der Z-Index in CSS3 nicht wirksam wird

So implementieren Sie die Ein-Klick-Bereitstellung von NFS unter Linux

So handhaben Sie Bilder in Vue-Formularen

Vue implementiert kleine Suchfunktion

Uniapp implementiert Beispielcode für die Anmeldung mit DingTalk-Scancode

Beispiele und Zusammenfassung der In-, Out- und Inout-Parameter von gespeicherten MySQL-Prozeduren

Beispielcode zur Implementierung der Google-Anmeldung über Drittanbieter in Vue

js verwendet die Reduce-Methode, um Ihren Code eleganter zu gestalten

Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel

8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden

Grundlegendes Lernprogramm zum Tabellen-Tag in HTML

Vue + Spring Boot realisiert die Bestätigungscodefunktion