Detaillierte Einführung in das Transformationsattribut in CSS3, um eine vertikale und horizontale Zentrierung von Divs mit variabler Breite und Höhe zu erreichen

transforDie Rolle von m

transform Attribut2D- oder 3D-Transformation anwenden auf das Element. Mit dieser Eigenschaft können wir das Element drehen, skalieren, bewegen oder neigen. (w3cSchule)

Transformationskompatibilität

Transformationskompatibilität ist relativ optimistisch. Unter IE9 ist es nicht kompatibel. IE9 unterstützt das alternative Attribut -ms-transform, unterstützt jedoch nur die 2D-Konvertierung.

Google und Safari unterstützen das alternative Attribut -webkit-transform. IE9 und höher, Firefox und Open sind kompatibel.

Ich glaube, dass Sie in tatsächlichen Projekten definitiv auf das Problem der variablen Breite und Höhe von p sowie der vertikalen und horizontalen Zentrierung stoßen werden. Ich erinnere mich, dass ich js verwendet habe, um es zu implementieren.

Tatsächlich gibt es mehrere Möglichkeiten, es mit CSS zu implementieren. Ich persönlich denke jedoch, dass die Verwendung von Transform einfacher und bequemer ist, aber mit Browsern unter IE9 ist es nicht kompatibel.

Jetzt zeige ich Ihnen die Beispiele, die in aktuellen Projekten verwendet wurden

Schreibrad Wann Beim Abspielen von Bildern wird die Anzahl der Punkte Schaltflächen unten anhand der Anzahl der Bilder bestimmt. Daher kann beim Schreiben von Code die Breite dieser Schaltflächenelemente nicht festgelegt werden und sie müssen in der Mitte angezeigt werden.

       <p class="scroll">
            <p class="scroll_pic">
                <a href="#"><img src="img/pic1.jpg" alt=""/></a>
                <a href="#"><img src="img/pic2.jpg" alt=""/></a>
                <a href="#"><img src="img/pic3.jpg" alt=""/></a>
                <a href="#"><img src="img/pic.jpg" alt=""/></a>
            </p>
            <ul>
                <li class="scroll_in"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </p>

.scroll {
    width: 720px;
    height: 410px;
    margin: 0 auto;
    margin-top: 100px;
    overflow: hidden;
    position: relative;
}.scroll ul {
    padding: 10px 0px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    bottom: 0px;
    left: 50%;
}.scroll ul li {
    float: left;
    margin: 0px 5px;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    border:1px #73B613 solid;
    background: #FCBE47;
    box-sizing: border-box;    
}.scroll ul li.scroll_in{
    background:#FF6600;
}

Im obigen Beispiel werden diese Schaltflächen auf einem ul-Element gehostet. Das ul-Element hat keine feste Breite und Höhe und keine Positionierung left:50% wird auf der linken Seite geschrieben. Wenn Sie nicht transformieren, wird die Breite auf der rechten Seite nicht berücksichtigt.

transform: translatorX(-50%); Die Funktion dieses Satzes besteht darin, ul relativ zu seiner eigenen Position horizontal um 50 % seiner Breite nach links zu verschieben. Dadurch wird genau der Effekt erzielt, den wir wollen.

In tatsächlichen Projekten verwenden wir häufig modale Boxen und verwenden p, um den Popup-Effekt zu simulieren.

Das Bild oben ist horizontal und vertikal zentriert .

<p class="demo">　　 <img src="img/pic3.jpg" /></p>

.demo{
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

Tatsächlich ist das obige Beispiel dasselbe, als würden wir ein Popup-Fenster schreiben, um es zu zentrieren. Ist das nicht ganz einfach? Damit müssen wir nicht so viel js schreiben und um Hilfe bitten.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Transformationsattribut in CSS3, um eine vertikale und horizontale Zentrierung von Divs mit variabler Breite und Höhe zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!