So erreichen Sie eine vertikale und horizontale Zentrierung in CSS

Dieser Artikel stellt hauptsächlich vor, wie man eine vertikale und horizontale Zentrierung in CSS erreicht. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen Im laufenden Interview werden wir oft gefragt, wie wir mit CSS ein Element vertikal und horizontal zentrieren können. Insbesondere bei schriftlichen Testfragen taucht diese Frage in unserem Leben häufig auf.

Drei Möglichkeiten, mit CSS eine vertikale und horizontale Zentrierung zu erreichen

1. Elemente in der Containeranzeige: Inline/Inline-Block

In diesem Fall ist es einfacher einzustellen Die Textausrichtung kann eine horizontale Zentrierung von Inhaltselementen erreichen, indem Sie die Höhe des Containers und dann die einfache Zeilenhöhe wie folgt festlegen:

     <p class="container">
        <span>this is text</span>
     </p>

rrree

2. Innerhalb des Containers Das Element display:block sowie die Breite und Höhe des Elements sind bekannt

In diesem Fall verwenden wir das Positionsattribut in Kombination mit der Einstellung des Offsets, um dies zu erreichen. Legen Sie zuerst die Position des Containers fest: relativ, setzen Sie die Elementposition auf absolut und legen Sie dann den Versatz des Elements (.inner-box) oben, links, Rand oben, Rand links fest, wobei oben und links festgelegt sind 50 % und margin Der Versatz von -top/margin-left beträgt die Hälfte der Höhe/Breite des Elements selbst, was ein negativer Wert ist.

Der Code lautet wie folgt:

    .container{    
        text-align: center;        
        height: 50px;        
        background: green;        
        line-height: 50px;    
        }

    <p class="container">
        <p class="inner-box"></p>
    </p>

3. Das Element display:block im Container und die Breite und Höhe des Elements sind unbekannt

Diese Methode ist ähnlich zu Methode 2, aber der Unterschied besteht darin, dass es nicht übergeben werden kann. Legen Sie den Rand-Oben-/Links-Offset fest, um den Effekt zu erzielen, da die Breite und Höhe der Elemente im Container unbekannt sind. Dieses Mal setzen wir links/oben/unten/rechts:0 und dann margin:auto.

Der Code lautet wie folgt:

    .container {        
        height: 200px;        
        width: 200px;        
        background: pink;        
        position: relative;    
        }

    .inner-box {       
     position: absolute;        
     top: 50%;        
     left: 50%;        
     margin-top: -50px;        
     margin-left: -50px;        
     height: 100px;        
     width: 100px;        
     background: green;    
     }

    <p class="container">
        <p class="inner-box"></p>
    </p>

Nachwort

Es gibt viele Möglichkeiten, eine vertikale und horizontale Zentrierung zu erreichen. Es ist auch möglich, die Übersetzung festzulegen oder ein Flex-Layout zu verwenden, aber die Methoden sind beschrieben oben Es hat eine bessere Kompatibilität. Sollte es Mängel geben, können Sie uns gerne darauf hinweisen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie CSS, um verschiedene Zentrierungsmethoden zu implementieren

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine vertikale und horizontale Zentrierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!